-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtailwind-reservation-form.html
139 lines (136 loc) · 4.33 KB
/
tailwind-reservation-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<div class="flex items-center justify-center p-12">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<div class="mx-auto w-full max-w-[550px] bg-white">
<form action="https://formbold.com/s/FORM_ID" method="POST">
<div class="-mx-3 flex flex-wrap">
<div class="w-full px-3 sm:w-1/2">
<div class="mb-5">
<label
for="fName"
class="mb-3 block text-base font-medium text-[#07074D]"
>
First Name
</label>
<input
type="text"
name="fName"
id="fName"
placeholder="First Name"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
</div>
<div class="w-full px-3 sm:w-1/2">
<div class="mb-5">
<label
for="lName"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Last Name
</label>
<input
type="text"
name="lName"
id="lName"
placeholder="Last Name"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
</div>
</div>
<div class="mb-5">
<label
for="guest"
class="mb-3 block text-base font-medium text-[#07074D]"
>
How many guest are you bringing?
</label>
<input
type="number"
name="guest"
id="guest"
placeholder="5"
min="0"
class="w-full appearance-none rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
<div class="-mx-3 flex flex-wrap">
<div class="w-full px-3 sm:w-1/2">
<div class="mb-5">
<label
for="date"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Date
</label>
<input
type="date"
name="date"
id="date"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
</div>
<div class="w-full px-3 sm:w-1/2">
<div class="mb-5">
<label
for="time"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Time
</label>
<input
type="time"
name="time"
id="time"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
</div>
</div>
<div class="mb-5">
<label class="mb-3 block text-base font-medium text-[#07074D]">
Are you coming to the event?
</label>
<div class="flex items-center space-x-6">
<div class="flex items-center">
<input
type="radio"
name="radio1"
id="radioButton1"
class="h-5 w-5"
/>
<label
for="radioButton1"
class="pl-3 text-base font-medium text-[#07074D]"
>
Yes
</label>
</div>
<div class="flex items-center">
<input
type="radio"
name="radio1"
id="radioButton2"
class="h-5 w-5"
/>
<label
for="radioButton2"
class="pl-3 text-base font-medium text-[#07074D]"
>
No
</label>
</div>
</div>
</div>
<div>
<button
class="hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none"
>
Submit
</button>
</div>
</form>
</div>
</div>