forked from thedevdojo/tails-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform-registration-long.html
112 lines (108 loc) · 7.74 KB
/
form-registration-long.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
<div class="flex p-1 py-12 bg-white place-content-center">
<div class="max-w-lg overflow-hidden border border-gray-200 rounded-lg">
<form class="w-full max-w-lg">
<div class="p-10 pb-6">
<div class="flex flex-wrap mb-6 -mx-3">
<div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-first-name">
First Name
</label>
<input class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
</div>
<div class="w-full px-3 md:w-1/2">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-last-name">
Last Name
</label>
<input class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
</div>
</div>
<div class="flex flex-wrap mb-6 -mx-3">
<div class="w-full px-3 mb-6">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-email">
Email
</label>
<input class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-email" type="email" placeholder="janedeo@example.com">
</div>
<div class="w-full px-3 mb-6">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-number">
Number
</label>
<input class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-email" type="text" placeholder="+91 XXX XXX XXXX">
</div>
<div class="w-full px-3 mb-6">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-password">
Password
</label>
<input class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-password" type="password" placeholder="***********">
</div>
</div>
<label class="block mt-4 mb-6">
<span class="font-bold text-gray-700">Address</span>
<textarea class="block w-full px-4 py-3 mt-1 mb-3 text-gray-700 bg-gray-200 border border-gray-200 rounded form-textarea focus:outline-none" rows="3" placeholder=""></textarea>
</label>
<div class="flex flex-wrap m-6 mb-2 -mx-3">
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-city">
City
</label>
<input class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
</div>
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-state">
State
</label>
<div class="relative">
<select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
<option>New Mexico</option>
<option>Missouri</option>
<option>Texas</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
</div>
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
<label class="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-zip">
Zip
</label>
<input class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
</div>
</div>
<div class="block mt-6">
<span class="font-bold text-gray-700">Gender</span>
<div class="flex mt-2 ">
<div class="p-2">
<label class="inline-flex items-center">
<input type="radio" class="text-indigo-600 form-radio" name="radio-colors" value="1" checked>
<span class="ml-2">Male</span>
</label>
</div>
<div class="p-2">
<label class="inline-flex items-center">
<input type="radio" class="text-green-500 form-radio" name="radio-colors" value="2">
<span class="ml-2">Female</span>
</label>
</div>
<div class="p-2">
<label class="inline-flex items-center">
<input type="radio" class="text-pink-600 form-radio" name="radio-colors" value="3">
<span class="ml-2">Other</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between p-5 text-center bg-gray-200">
<div class="relative flex flex-col items-start mr-1 text-sm">
<span class="mr-1 text-gray-500">Already have an account?</span>
<a href="#_" class="block font-medium text-indigo-600 underline">Login Here</a>
</div>
<button type="button" class="inline-flex items-center px-6 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
Register Now
</button>
</div>
</form>
</div>
</div>