-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
154 lines (148 loc) · 7.77 KB
/
index.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Source+Code+Pro|Roboto&display=swap"
rel="stylesheet">
</head>
<body class="bg-gray-300" style="font-family:Roboto">
<div class="lg:flex justify-center lg:w-3/4 mx-auto my-8">
<div class="bg-white lg:w-2/3 lg:rounded-l-lg mx-6 px-6 lg:px-0 lg:mx-0 lg:px-20">
<div class="text-3xl text-gray-700 py-6">Registration Form</div>
<hr class="-mx-20">
<div class="py-8">
<div class="flex mb-4">
<span
class="flex items-center justify-center block rounded-full border border-blue-500 h-6 w-6 text-xs font-bold text-blue-500 mr-3">1</span>
<span class="font-bold text-gray-800">Personal Information</span>
</div>
<div class="lg:flex mb-2 -mx-1">
<div class="lg:w-1/2 mb-3 lg:mb-2 mx-1">
<div class="px-1">
<label class="text-gray-600 font-light">First Name</label>
<input type='text'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
<div class="lg:w-1/2 mb-3 lg:mb-2 mx-1">
<div class="px-1">
<label class="text-gray-600 font-light">Last Name</label>
<input type='text'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
</div>
<div class="lg:w-2/3">
<div class="px-1">
<label class="text-gray-600 font-light">Email</label>
<input type='email'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
</div>
<hr class="-mx-20">
<div class="py-8">
<div class="flex mb-4">
<span
class="flex items-center justify-center block rounded-full border border-blue-500 h-6 w-6 text-xs font-bold text-blue-500 mr-3">2</span>
<span class="font-bold text-gray-800">Address Information</span>
</div>
<div class="lg:flex mb-2 -mx-1">
<div class="lg:w-1/2 mb-3 lg:mb-2 mx-1">
<div class="px-1">
<label class="text-gray-600 font-light">Country</label>
<input type='text'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
<div class="lg:w-1/2 mb-3 lg:mb-2 mx-1">
<div class="px-1">
<label class="text-gray-600 font-light">Street Address</label>
<input type='text'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
</div>
<div class="lg:w-2/3">
<div class="px-1">
<label class="text-gray-600 font-light">State</label>
<input type='email'
class="w-full mt-1 px-2 py-1 border rounded-lg text-gray-700 focus:outline-none focus:border-green-500" />
</div>
</div>
</div>
<hr class="-mx-20">
<div class="flex justify-end py-8">
<button type="button"
class="flex items-center bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-6 py-2 focus:outline-none">
<span class="material-icons pr-1" style="font-size: 18px;">add</span>
Register
</button>
</div>
</div>
<div class="bg-blue-600 lg:w-1/3 lg:rounded-r-lg mx-6 px-6 lg:mx-0 lg:px-0">
<div class="px-8">
<div class="font-bold text-gray-200 pt-8 pb-3">Freelancer</div>
<div class="tracking-wider">
<sup class="text-base text-gray-100" style="top:-1em;">$</sup>
<span class="font-light text-4xl -mx-1 text-gray-100">99</span>
<sub class="text-base text-gray-100 tracking-normal">/Year</sub>
</div>
<div class="italic text-gray-300 py-2">
Automatically renews after 1 year
</div>
<div class="mt-6">
<div class="">
<div class="flex mb-1">
<p class="text-gray-300 mr-2">
<span class="border rounded-full material-icons p-1" style="font-size:10px">
done</span>
</p>
<p class="text-gray-300">Uses on 5 client sites.</p>
</div>
<div class="flex mb-1">
<p class="text-gray-300 mr-2">
<span class="border rounded-full material-icons p-1" style="font-size:10px">
done</span>
</p>
<p class="text-gray-300">Private repositories.</p>
</div>
<div class="flex mb-1">
<p class="text-gray-300 mr-2">
<span class="border rounded-full material-icons p-1" style="font-size:10px">
done</span>
</p>
<p class="text-gray-300">Email Support</p>
</div>
</div>
</div>
<div class="mt-6 text-gray-300">
<span class="block">Need <strong class="text-white font-bold">20</strong> client sites ?</span>
<a href="#" class="text-gray-100 font-bold underline">Switch to <span class="italic">Agency</span>
account.</a>
</div>
<hr class="border-1 border-gray-500 my-10">
<div class="mt-6 text-gray-400 font-light">
Css is horrible things. Web2tailwind helps to deals with in very effective and production way.
</div>
<div class="flex items-center justify-between my-4">
<div class="w-16">
<img class="border border-gray-500 p-2 w-12 h-12 rounded-full"
src="http://web2tailwind.com/assets/img/logo-white.png">
</div>
<div class="flex-1">
<div class="text-gray-300 font-semibold">
Web2tailwind.com
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>