-
Notifications
You must be signed in to change notification settings - Fork 94
/
ui.html
296 lines (281 loc) · 21 KB
/
ui.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!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">
<!-- Css -->
<link rel="stylesheet" href="./dist/styles.css">
<link rel="stylesheet" href="./dist/all.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i" rel="stylesheet">
<title>UI | Tailwind Admin</title>
</head>
<body>
<!--Container -->
<div class="mx-auto bg-gray-300est">
<!--Screen-->
<div class="min-h-screen flex flex-col">
<!--Header Section Starts Here-->
<header class="bg-nav">
<div class="flex justify-between">
<div class="p-1 mx-3 inline-flex items-center">
<i class="fas fa-bars pr-2 text-white" onclick="sidebarToggle()"></i>
<h1 class="text-white p-2">Logo</h1>
</div>
<div class="p-1 flex flex-row items-center">
<img onclick="profileToggle()" class="inline-block h-8 w-8 rounded-full" src="https://avatars0.githubusercontent.com/u/4323180?s=460&v=4" alt="">
<a href="#" onclick="profileToggle()" class="text-white p-2 no-underline hidden md:block lg:block">Adam Wathan</a>
<div id="ProfileDropDown" class="rounded hidden shadow-md bg-white absolute top-0 mt-12 mr-1 right-0">
<ul class="list-reset">
<li><a href="#" class="no-underline px-4 py-2 block text-black hover:bg-gray-300">My account</a></li>
<li><a href="#" class="no-underline px-4 py-2 block text-black hover:bg-gray-300">Notifications</a></li>
<li><hr class="border-t mx-2 border-gray-ligght"></li>
<li><a href="#" class="no-underline px-4 py-2 block text-black hover:bg-gray-300">Logout</a></li>
</ul>
</div>
</div>
</div>
</header>
<!--/Header-->
<div class="flex flex-1">
<!--Sidebar-->
<aside id="sidebar" class="bg-side-nav w-1/2 md:w-1/6 lg:w-1/6 border-r border-side-nav hidden md:block lg:block">
<div class="flex">
</div>
<ul class="list-reset flex flex-col">
<li class=" w-full h-full py-3 px-2 border-b border-300-border ">
<a href="index.html"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fas fa-tachometer-alt float-left mx-2"></i>
Dashboard
<span><i class="fas fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2 border-b border-300-border">
<a href="forms.html"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fab fa-wpforms float-left mx-2"></i>
Forms
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2 border-b border-300-border">
<a href="buttons.html"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fas fa-grip-horizontal float-left mx-2"></i>
Buttons
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2 border-b border-light-border">
<a href="tables.html"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fas fa-table float-left mx-2"></i>
Tables
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2 border-b border-300-border bg-white">
<a href="ui.html"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fab fa-uikit float-left mx-2"></i>
Ui components
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2 border-b border-300-border">
<a href="modals.html" class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="fas fa-square-full float-left mx-2"></i>
Modals
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="w-full h-full py-3 px-2">
<a href="#"
class="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
<i class="far fa-file float-left mx-2"></i>
Pages
<span><i class="fa fa-angle-down float-right"></i></span>
</a>
<ul class="list-reset -mx-2 bg-white-medium-dark">
<li class="border-t mt-2 border-300-border w-full h-full px-2 py-3">
<a href="login.html"
class="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
Login Page
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="border-t border-300-border w-full h-full px-2 py-3">
<a href="register.html"
class="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
Register Page
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
<li class="border-t border-300-border w-full h-full px-2 py-3">
<a href="404.html"
class="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
404 Page
<span><i class="fa fa-angle-right float-right"></i></span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<!--/Sidebar-->
<!--Main-->
<main class="bg-white-medium flex-1 p-3 overflow-hidden">
<div class="flex flex-col">
<!-- Card Sextion Starts Here -->
<div class="flex flex-1 flex-col md:flex-row lg:flex-row mx-2">
<!--Horizontal form-->
<div class="mb-2 border-solid border-gray-200 rounded border shadow-sm w-full md:w-1/2 lg:w-1/2">
<div class="bg-gray-200 px-2 py-3 border-solid border-gray-300 border-b">
Traditional Alerts
</div>
<div class="p-3">
<!-- Traditional alert -->
<div class="bg-red-300 mb-2 border border-red-300 text-red-dark px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Oops!</strong>
<span class="block sm:inline">This is an Error alert.</span>
<span class="absolute top-0 top-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
<div class="bg-green-300 mb-2 border border-green-300 text-green-600 px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Oops!</strong>
<span class="block sm:inline">This is an Success alert.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-green" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
<div class="bg-orange-300 mb-2 border border-orange-300 text-orange-dark px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Oops!</strong>
<span class="block sm:inline">This is an Warning alert.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-orange" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
<div class="bg-info-light mb-2 border border-info-300 text-info-dark px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Oops!</strong>
<span class="block sm:inline">This is an info alert.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-info" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
<!-- Solid Alert -->
<div class="flex items-center mb-2 bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p>Something happened that you should know about.</p>
</div>
<div class="flex items-center mb-2 bg-green-500 text-white text-sm font-bold px-4 py-3" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p>Congratulations! This is success alert.</p>
</div>
</div>
</div>
<!--/Horizontal form-->
<!--Underline form-->
<div class="mb-2 md:mx-2 lg:mx-2 border-solid border-gray-300 rounded border shadow-sm w-full md:w-1/2 lg:w-1/2">
<div class="bg-gray-200 px-2 py-3 border-solid border-gray-300 border-b">
Misc Alerts
</div>
<div class="p-3">
<!-- Modern Alert -->
<div class="bg-orange-300 border-l-4 mb-2 border-orange-500 text-orange-800 p-4" role="alert">
<p class="font-bold">Be Warned</p>
<p>Something not ideal might be happening.</p>
</div>
<!-- Titled Alert -->
<div role="alert" class="mb-2">
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
Danger
</div>
<div class="border border-t-0 border-red-300 rounded-b bg-red-300 px-4 py-3 text-red-800">
<p>Something not ideal might be happening.</p>
</div>
</div>
<!-- left accent border -->
<div class="bg-teal-300 mb-2 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
<div class="flex">
<div class="py-1"><svg class="fill-current h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
<div>
<p class="font-bold">Our privacy policy has changed</p>
<p class="text-sm">Make sure you know how these changes affect you.</p>
</div>
</div>
</div>
<!-- informational alert -->
<div class="bg-blue-300 border-t border-b border-blue-500 text-blue-800 px-4 py-3" role="alert">
<p class="font-bold">Informational message</p>
<p class="text-sm">Some additional text to explain said message.</p>
</div>
</div>
</div>
<!--/Underline form-->
</div>
<!-- /Cards Section Ends Here -->
<!--Grid Form-->
<div class="flex flex-1 flex-col md:flex-row lg:flex-row mx-2">
<div class="mb-2 border-solid border-gray-300 rounded border shadow-sm w-full">
<div class="bg-gray-200 px-2 py-3 border-solid border-gray-300 border-b">
Cards
</div>
<div class="p-1 flex flex-1 flex-col md:flex-row lg:flex-row justify-between md:mx-2 lg:mx-2">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Card Title</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-darker mr-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-darker mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-darker">#winter</span>
</div>
</div>
<!-- horizontal card -->
<div class="max-w-md w-full lg:flex lg:mx-2 md:mx-2">
<div class="h-40 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('https://tailwindcss.com/img/card-left.jpg')" title="Woman holding a mug">
</div>
<div class="border-r border-b border-l border-gray-300 lg:border-l-0 lg:border-t lg:border-gray-300 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-2">
<p class="text-sm text-gray-700 flex items-center">
<svg class="fill-current text-gray w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
</svg>
Members only
</p>
<div class="text-black-500 font-bold text-lg mb-2">Can coffee make you a better developer?</div>
<p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et p.</p>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-black leading-none">Jonathan Reinink</p>
<p class="text-gray-dark">Aug 18</p>
</div>
</div>
</div>
</div>
<!-- /horizontal card -->
</div>
</div>
</div>
<!--/Grid Form-->
</div>
</main>
<!--/Main-->
</div>
<!--Footer-->
<footer class="bg-gray-darkest text-white p-2">
<div class="flex flex-1 mx-auto">© My Design</div>
</footer>
<!--/footer-->
</div>
</div>
<script src="./main.js"></script>
</body>
</html>