daisy-ui-kit 2.1.1 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -2
- package/components/.DS_Store +0 -0
- package/components/Home/AlternatingFeatureSections.vue +0 -219
- package/components/Home/BitoviConsulting.vue +0 -53
- package/components/Home/BitoviOpenSource.vue +0 -51
- package/components/Home/Footer.vue +0 -127
- package/components/Home/GradientFeatureSections.vue +0 -87
- package/components/Home/Header.vue +0 -95
- package/components/Home/Hero.vue +0 -53
- package/components/Home/PremiumCTA.vue +0 -28
- package/components/Home/Testimonial.vue +0 -23
- package/components/content/Badge.ts +0 -3
- package/components/content/CodePreview.vue +0 -28
- package/components/content/ColorBadge.vue +0 -24
- package/components/content/DemoExample.vue +0 -23
- package/components/content/DemoExampleResponsive.vue +0 -59
- package/components/content/IframeRenderer.ts +0 -53
- package/components/content/Indent.vue +0 -3
- package/components/content/LocalLinks.vue +0 -31
- package/components/content/NotFound.vue +0 -42
- package/components/content/PageNext.vue +0 -24
- package/components/content/PagePrevious.vue +0 -24
- package/components/content/PrevNext.vue +0 -40
- package/components/content/ProseA.vue +0 -19
- package/components/content/ProseAlert.vue +0 -11
- package/components/content/ProseBlockquote.vue +0 -5
- package/components/content/ProseCode.vue +0 -62
- package/components/content/ProseCodeInline.vue +0 -3
- package/components/content/ProseEm.vue +0 -5
- package/components/content/ProseH1.vue +0 -16
- package/components/content/ProseH2.vue +0 -16
- package/components/content/ProseH3.vue +0 -16
- package/components/content/ProseH4.vue +0 -16
- package/components/content/ProseH5.vue +0 -16
- package/components/content/ProseH6.vue +0 -16
- package/components/content/ProseHr.vue +0 -3
- package/components/content/ProseImg.vue +0 -34
- package/components/content/ProseLi.vue +0 -3
- package/components/content/ProseOl.vue +0 -5
- package/components/content/ProseP.vue +0 -3
- package/components/content/ProseStrong.vue +0 -5
- package/components/content/ProseTable.vue +0 -7
- package/components/content/ProseTbody.vue +0 -5
- package/components/content/ProseTd.vue +0 -5
- package/components/content/ProseTh.vue +0 -5
- package/components/content/ProseThead.vue +0 -5
- package/components/content/ProseTr.vue +0 -5
- package/components/content/ProseUl.vue +0 -5
- package/components/content/Search.vue +0 -160
- package/components/content/Sidebar.vue +0 -65
- package/components/content/SidebarMenuSection.vue +0 -38
- package/components/content/SigninForm.vue +0 -47
- package/components/content/TableOfContents.vue +0 -80
- package/components/content/TypeBadge.vue +0 -17
- package/components/content/UserMenu.vue +0 -62
- package/components/theme/Builder.vue +0 -284
- package/components/theme/Output.vue +0 -70
- package/components/theme/Picker.vue +0 -47
- package/components/theme/Preview.vue +0 -1684
- package/components/theme/Provider.vue +0 -43
- package/components/theme/Snooper.vue +0 -41
- package/components/theme/Swatch.vue +0 -47
- package/components/theme/custom-themes.ts +0 -34
- package/components/theme/theme-utils.ts +0 -175
|
@@ -1,1684 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="theme-preview">
|
|
3
|
-
<div class="px-2 pt-2">
|
|
4
|
-
<div class="space-x-1 navbar rounded-box bg-primary text-primary-content">
|
|
5
|
-
<div class="flex-none hidden md:flex">
|
|
6
|
-
<div class="dropdown">
|
|
7
|
-
<div tabindex="0">
|
|
8
|
-
<button
|
|
9
|
-
aria-label="drawer component"
|
|
10
|
-
class="border-none btn btn-square btn-ghost mask mask-squircle focus:bg-base-content focus:bg-opacity-50"
|
|
11
|
-
>
|
|
12
|
-
<svg
|
|
13
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
14
|
-
fill="none"
|
|
15
|
-
viewBox="0 0 24 24"
|
|
16
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
17
|
-
>
|
|
18
|
-
<path
|
|
19
|
-
stroke-linecap="round"
|
|
20
|
-
stroke-linejoin="round"
|
|
21
|
-
stroke-width="2"
|
|
22
|
-
d="M4 6h16M4 12h16M4 18h16"
|
|
23
|
-
/>
|
|
24
|
-
</svg>
|
|
25
|
-
</button>
|
|
26
|
-
</div>
|
|
27
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
28
|
-
<div
|
|
29
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
30
|
-
>
|
|
31
|
-
<div class="card-body">
|
|
32
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
33
|
-
drawer component
|
|
34
|
-
</h2>
|
|
35
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
36
|
-
Drawer component is useful for opening a sidebar menu
|
|
37
|
-
</p>
|
|
38
|
-
<div class="flex justify-end mt-4">
|
|
39
|
-
<a
|
|
40
|
-
target="blank"
|
|
41
|
-
href="https://daisyui.com/components/drawer"
|
|
42
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
43
|
-
>
|
|
44
|
-
See component
|
|
45
|
-
</a>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="justify-center flex-1 px-2 mx-2 md:flex md:justify-start">
|
|
53
|
-
<div class="dropdown">
|
|
54
|
-
<div tabindex="0">
|
|
55
|
-
<span class="text-2xl font-title"> Components Preview </span>
|
|
56
|
-
</div>
|
|
57
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
58
|
-
<div
|
|
59
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
60
|
-
>
|
|
61
|
-
<div class="card-body">
|
|
62
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
63
|
-
navbar component
|
|
64
|
-
</h2>
|
|
65
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
66
|
-
You'll need a navbar on top of your page
|
|
67
|
-
</p>
|
|
68
|
-
<div class="flex justify-end mt-4">
|
|
69
|
-
<a
|
|
70
|
-
target="blank"
|
|
71
|
-
href="https://daisyui.com/components/navbar"
|
|
72
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
73
|
-
>
|
|
74
|
-
See component
|
|
75
|
-
</a>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="flex-1 hidden md:flex md:flex-none">
|
|
83
|
-
<div class="form-control">
|
|
84
|
-
<div class="dropdown">
|
|
85
|
-
<div tabindex="0">
|
|
86
|
-
<input
|
|
87
|
-
type="text"
|
|
88
|
-
placeholder="Text Input"
|
|
89
|
-
class="rounded-full input input-ghost placeholder-primary-content text-primary-content focus:text-primary-content input-bordered focus:bg-transparent"
|
|
90
|
-
>
|
|
91
|
-
</div>
|
|
92
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
93
|
-
<div
|
|
94
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
95
|
-
>
|
|
96
|
-
<div class="card-body">
|
|
97
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
98
|
-
text input component
|
|
99
|
-
</h2>
|
|
100
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
101
|
-
Text input comes in various sizes and styles
|
|
102
|
-
</p>
|
|
103
|
-
<div class="flex justify-end mt-4">
|
|
104
|
-
<a
|
|
105
|
-
target="blank"
|
|
106
|
-
href="https://daisyui.com/components/form/input"
|
|
107
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
108
|
-
>
|
|
109
|
-
See component
|
|
110
|
-
</a>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="dropdown dropdown-left">
|
|
119
|
-
<div tabindex="0">
|
|
120
|
-
<button
|
|
121
|
-
aria-label="button component"
|
|
122
|
-
class="hidden border-none md:flex btn btn-square btn-ghost mask mask-squircle focus:bg-base-content focus:bg-opacity-50"
|
|
123
|
-
>
|
|
124
|
-
<svg
|
|
125
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
126
|
-
fill="none"
|
|
127
|
-
viewBox="0 0 24 24"
|
|
128
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
129
|
-
>
|
|
130
|
-
<path
|
|
131
|
-
stroke-linecap="round"
|
|
132
|
-
stroke-linejoin="round"
|
|
133
|
-
stroke-width="2"
|
|
134
|
-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
135
|
-
/>
|
|
136
|
-
</svg>
|
|
137
|
-
</button>
|
|
138
|
-
</div>
|
|
139
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
140
|
-
<div
|
|
141
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
142
|
-
>
|
|
143
|
-
<div class="card-body">
|
|
144
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
145
|
-
navbar component
|
|
146
|
-
</h2>
|
|
147
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
148
|
-
You'll need a navbar on top of your page
|
|
149
|
-
</p>
|
|
150
|
-
<div class="flex justify-end mt-4">
|
|
151
|
-
<a
|
|
152
|
-
target="blank"
|
|
153
|
-
href="https://daisyui.com/components/navbar"
|
|
154
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
155
|
-
>
|
|
156
|
-
See component
|
|
157
|
-
</a>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
<div class="dropdown dropdown-left">
|
|
164
|
-
<div tabindex="0">
|
|
165
|
-
<button
|
|
166
|
-
aria-label="button component"
|
|
167
|
-
class="hidden border-none md:flex btn btn-square btn-ghost mask mask-squircle focus:bg-base-content focus:bg-opacity-50"
|
|
168
|
-
>
|
|
169
|
-
<svg
|
|
170
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
171
|
-
fill="none"
|
|
172
|
-
viewBox="0 0 24 24"
|
|
173
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
174
|
-
>
|
|
175
|
-
<path
|
|
176
|
-
stroke-linecap="round"
|
|
177
|
-
stroke-linejoin="round"
|
|
178
|
-
stroke-width="2"
|
|
179
|
-
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
|
180
|
-
/>
|
|
181
|
-
</svg>
|
|
182
|
-
</button>
|
|
183
|
-
</div>
|
|
184
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
185
|
-
<div
|
|
186
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
187
|
-
>
|
|
188
|
-
<div class="card-body">
|
|
189
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
190
|
-
navbar component
|
|
191
|
-
</h2>
|
|
192
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
193
|
-
You'll need a navbar on top of your page
|
|
194
|
-
</p>
|
|
195
|
-
<div class="flex justify-end mt-4">
|
|
196
|
-
<a
|
|
197
|
-
target="blank"
|
|
198
|
-
href="https://daisyui.com/components/navbar"
|
|
199
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
200
|
-
>
|
|
201
|
-
See component
|
|
202
|
-
</a>
|
|
203
|
-
</div>
|
|
204
|
-
</div>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
</div>
|
|
208
|
-
<div class="dropdown dropdown-left">
|
|
209
|
-
<div tabindex="0">
|
|
210
|
-
<button
|
|
211
|
-
aria-label="navbar component"
|
|
212
|
-
class="hidden border-none md:flex btn btn-square btn-ghost mask mask-squircle focus:bg-base-content focus:bg-opacity-50"
|
|
213
|
-
>
|
|
214
|
-
<div class="avatar">
|
|
215
|
-
<div class="w-10 h-10 mask mask-squircle">
|
|
216
|
-
<img
|
|
217
|
-
src="https://daisyui.com/tailwind-css-component-profile-1@40w.png"
|
|
218
|
-
alt="Avatar Tailwind CSS Component"
|
|
219
|
-
>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
</button>
|
|
223
|
-
</div>
|
|
224
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
225
|
-
<div
|
|
226
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
227
|
-
>
|
|
228
|
-
<div class="card-body">
|
|
229
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
230
|
-
avatar component
|
|
231
|
-
</h2>
|
|
232
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
233
|
-
Use avatar component with any size
|
|
234
|
-
</p>
|
|
235
|
-
<div class="flex justify-end mt-4">
|
|
236
|
-
<a
|
|
237
|
-
target="blank"
|
|
238
|
-
href="https://daisyui.com/components/avatar"
|
|
239
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
240
|
-
>
|
|
241
|
-
See component
|
|
242
|
-
</a>
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
<div
|
|
251
|
-
id="component-demo"
|
|
252
|
-
class="flex items-center w-full grid-flow-row grid-cols-12 gap-4 px-10 pt-1 pb-10 overflow-x-auto overflow-y-hidden xl:px-4 xl:overflow-x-hidden xl:overflow-x-auto xl:grid"
|
|
253
|
-
>
|
|
254
|
-
<div
|
|
255
|
-
class="grid items-center flex-shrink-0 col-span-3 row-span-3 gap-4 p-4 py-8 mx-2 shadow-xl bg-base-100 rounded-box place-items-center xl:mx-0 w-72 xl:w-auto place-self-start xl:w-full"
|
|
256
|
-
>
|
|
257
|
-
<div class="dropdown">
|
|
258
|
-
<div tabindex="0">
|
|
259
|
-
<div class="avatar online">
|
|
260
|
-
<div class="w-24 h-24 p-px mask mask-squircle bg-base-content bg-opacity-10">
|
|
261
|
-
<img
|
|
262
|
-
src="https://daisyui.com/tailwind-css-component-profile-1@94w.png"
|
|
263
|
-
width="94"
|
|
264
|
-
height="94"
|
|
265
|
-
alt="Avatar Tailwind CSS Component"
|
|
266
|
-
class="mask mask-squircle"
|
|
267
|
-
>
|
|
268
|
-
</div>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
272
|
-
<div
|
|
273
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
274
|
-
>
|
|
275
|
-
<div class="card-body">
|
|
276
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
277
|
-
avatar component
|
|
278
|
-
</h2>
|
|
279
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
280
|
-
Use avatar component with any size
|
|
281
|
-
</p>
|
|
282
|
-
<div class="flex justify-end mt-4">
|
|
283
|
-
<a
|
|
284
|
-
target="blank"
|
|
285
|
-
href="https://daisyui.com/components/avatar"
|
|
286
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
287
|
-
>
|
|
288
|
-
See component
|
|
289
|
-
</a>
|
|
290
|
-
</div>
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
</div>
|
|
294
|
-
</div>
|
|
295
|
-
<div>
|
|
296
|
-
<div class="w-full dropdown">
|
|
297
|
-
<div tabindex="0">
|
|
298
|
-
<div class="text-center">
|
|
299
|
-
<div class="text-lg font-extrabold">
|
|
300
|
-
Betsy Braddock
|
|
301
|
-
</div>
|
|
302
|
-
<div class="my-3 text-sm text-base-content text-opacity-60">
|
|
303
|
-
Strategic Art Manager
|
|
304
|
-
<br>Global Illustration Observer <br>Business Alignment Developer
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
309
|
-
<div
|
|
310
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
311
|
-
>
|
|
312
|
-
<div class="card-body">
|
|
313
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
314
|
-
card component
|
|
315
|
-
</h2>
|
|
316
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
317
|
-
Card component is used to show products, features and more.
|
|
318
|
-
</p>
|
|
319
|
-
<div class="flex justify-end mt-4">
|
|
320
|
-
<a
|
|
321
|
-
target="blank"
|
|
322
|
-
href="https://daisyui.com/components/card"
|
|
323
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
324
|
-
>
|
|
325
|
-
See component
|
|
326
|
-
</a>
|
|
327
|
-
</div>
|
|
328
|
-
</div>
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="w-full dropdown">
|
|
333
|
-
<div tabindex="0">
|
|
334
|
-
<div class="mt-2 text-center">
|
|
335
|
-
<div class="badge badge-ghost">
|
|
336
|
-
Design
|
|
337
|
-
</div>
|
|
338
|
-
<div class="badge badge-ghost">
|
|
339
|
-
Art
|
|
340
|
-
</div>
|
|
341
|
-
<div class="badge badge-ghost">
|
|
342
|
-
Illustration
|
|
343
|
-
</div>
|
|
344
|
-
</div>
|
|
345
|
-
</div>
|
|
346
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
347
|
-
<div
|
|
348
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
349
|
-
>
|
|
350
|
-
<div class="card-body">
|
|
351
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
352
|
-
badge component
|
|
353
|
-
</h2>
|
|
354
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
355
|
-
Use badge component to highlight small inline items
|
|
356
|
-
</p>
|
|
357
|
-
<div class="flex justify-end mt-4">
|
|
358
|
-
<a
|
|
359
|
-
target="blank"
|
|
360
|
-
href="https://daisyui.com/components/badge"
|
|
361
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
362
|
-
>
|
|
363
|
-
See component
|
|
364
|
-
</a>
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
</div>
|
|
369
|
-
</div>
|
|
370
|
-
</div>
|
|
371
|
-
<div class="dropdown dropdown-top">
|
|
372
|
-
<div tabindex="0">
|
|
373
|
-
<div class="btn-group">
|
|
374
|
-
<button class="btn btn-accent btn-sm">
|
|
375
|
-
Follow
|
|
376
|
-
</button>
|
|
377
|
-
<button aria-label="button component" class="btn btn-accent btn-sm btn-square">
|
|
378
|
-
<svg
|
|
379
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
380
|
-
fill="none"
|
|
381
|
-
viewBox="0 0 24 24"
|
|
382
|
-
class="w-6 h-6 stroke-current"
|
|
383
|
-
>
|
|
384
|
-
<path
|
|
385
|
-
stroke-linecap="round"
|
|
386
|
-
stroke-linejoin="round"
|
|
387
|
-
stroke-width="2"
|
|
388
|
-
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
|
|
389
|
-
/>
|
|
390
|
-
</svg>
|
|
391
|
-
</button>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
395
|
-
<div
|
|
396
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
397
|
-
>
|
|
398
|
-
<div class="card-body">
|
|
399
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
400
|
-
button group component
|
|
401
|
-
</h2>
|
|
402
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
403
|
-
Use it to group multiple buttons together
|
|
404
|
-
</p>
|
|
405
|
-
<div class="flex justify-end mt-4">
|
|
406
|
-
<a
|
|
407
|
-
target="blank"
|
|
408
|
-
href="https://daisyui.com/components/join"
|
|
409
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
410
|
-
>
|
|
411
|
-
See component
|
|
412
|
-
</a>
|
|
413
|
-
</div>
|
|
414
|
-
</div>
|
|
415
|
-
</div>
|
|
416
|
-
</div>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
<div
|
|
420
|
-
class="flex flex-col justify-center flex-shrink-0 col-span-3 row-span-3 gap-4 p-4 mx-2 shadow-xl bg-base-100 rounded-box xl:mx-0 w-72 xl:w-auto place-self-start xl:w-full"
|
|
421
|
-
>
|
|
422
|
-
<div class="px-6 pt-6">
|
|
423
|
-
<div class="text-xl font-extrabold">
|
|
424
|
-
Superpower settings
|
|
425
|
-
</div>
|
|
426
|
-
<div class="my-4 text-xs text-base-content text-opacity-60">
|
|
427
|
-
Enable your favorite superpowers. Terms and conditions apply
|
|
428
|
-
</div>
|
|
429
|
-
<div class="flex-1 w-full dropdown">
|
|
430
|
-
<div tabindex="0">
|
|
431
|
-
<div class="form-control">
|
|
432
|
-
<label class="cursor-pointer label"><span class="label-text">Enable teleportation</span>
|
|
433
|
-
<input type="checkbox" checked class="toggle toggle-primary"></label>
|
|
434
|
-
</div>
|
|
435
|
-
<div class="form-control">
|
|
436
|
-
<label class="cursor-pointer label"><span class="label-text">Enable time travel</span>
|
|
437
|
-
<input type="checkbox" checked class="toggle toggle-secondary"></label>
|
|
438
|
-
</div>
|
|
439
|
-
<div class="form-control">
|
|
440
|
-
<label class="cursor-pointer label"><span class="label-text">Enable laser eyes</span>
|
|
441
|
-
<input type="checkbox" checked class="toggle toggle-accent"></label>
|
|
442
|
-
</div>
|
|
443
|
-
<div class="form-control">
|
|
444
|
-
<label class="cursor-pointer label"><span class="label-text">Enable immortality</span>
|
|
445
|
-
<input type="checkbox" checked class="toggle"></label>
|
|
446
|
-
</div>
|
|
447
|
-
</div>
|
|
448
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
449
|
-
<div
|
|
450
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
451
|
-
>
|
|
452
|
-
<div class="card-body">
|
|
453
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
454
|
-
toggle component
|
|
455
|
-
</h2>
|
|
456
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
457
|
-
Use toggle to switch between two states
|
|
458
|
-
</p>
|
|
459
|
-
<div class="flex justify-end mt-4">
|
|
460
|
-
<a
|
|
461
|
-
target="blank"
|
|
462
|
-
href="https://daisyui.com/components/form/toggle"
|
|
463
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
464
|
-
>
|
|
465
|
-
See component
|
|
466
|
-
</a>
|
|
467
|
-
</div>
|
|
468
|
-
</div>
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
472
|
-
</div>
|
|
473
|
-
<div class="form-control">
|
|
474
|
-
<div class="dropdown dropdown-top dropdown-end">
|
|
475
|
-
<div tabindex="0">
|
|
476
|
-
<button class="space-x-2 btn btn-block btn-secondary">
|
|
477
|
-
<svg
|
|
478
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
479
|
-
fill="none"
|
|
480
|
-
viewBox="0 0 24 24"
|
|
481
|
-
class="w-6 h-6 stroke-current"
|
|
482
|
-
>
|
|
483
|
-
<path
|
|
484
|
-
stroke-linecap="round"
|
|
485
|
-
stroke-linejoin="round"
|
|
486
|
-
stroke-width="2"
|
|
487
|
-
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
488
|
-
/>
|
|
489
|
-
</svg>
|
|
490
|
-
<span>Apply settings</span>
|
|
491
|
-
</button>
|
|
492
|
-
</div>
|
|
493
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
494
|
-
<div
|
|
495
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
496
|
-
>
|
|
497
|
-
<div class="card-body">
|
|
498
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
499
|
-
button component
|
|
500
|
-
</h2>
|
|
501
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
502
|
-
Buttons come in various shapes, colors and sizes
|
|
503
|
-
</p>
|
|
504
|
-
<div class="flex justify-end mt-4">
|
|
505
|
-
<a
|
|
506
|
-
target="blank"
|
|
507
|
-
href="https://daisyui.com/components/button"
|
|
508
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
509
|
-
>
|
|
510
|
-
See component
|
|
511
|
-
</a>
|
|
512
|
-
</div>
|
|
513
|
-
</div>
|
|
514
|
-
</div>
|
|
515
|
-
</div>
|
|
516
|
-
</div>
|
|
517
|
-
</div>
|
|
518
|
-
</div>
|
|
519
|
-
<div
|
|
520
|
-
class="flex-shrink-0 col-span-3 row-span-4 mx-2 overflow-visible shadow-xl card bg-base-100 xl:mx-0 w-72 xl:w-auto"
|
|
521
|
-
>
|
|
522
|
-
<div class="dropdown">
|
|
523
|
-
<div tabindex="0">
|
|
524
|
-
<figure>
|
|
525
|
-
<img
|
|
526
|
-
src="https://daisyui.com/tailwind-css-component-card-1.png"
|
|
527
|
-
width="300"
|
|
528
|
-
height="187"
|
|
529
|
-
alt="Card Tailwind CSS Component"
|
|
530
|
-
class="rounded-t-box"
|
|
531
|
-
>
|
|
532
|
-
</figure>
|
|
533
|
-
</div>
|
|
534
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
535
|
-
<div
|
|
536
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
537
|
-
>
|
|
538
|
-
<div class="card-body">
|
|
539
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
540
|
-
card component
|
|
541
|
-
</h2>
|
|
542
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
543
|
-
Card component is used to show products, features and more.
|
|
544
|
-
</p>
|
|
545
|
-
<div class="flex justify-end mt-4">
|
|
546
|
-
<a
|
|
547
|
-
target="blank"
|
|
548
|
-
href="https://daisyui.com/components/card"
|
|
549
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
550
|
-
>
|
|
551
|
-
See component
|
|
552
|
-
</a>
|
|
553
|
-
</div>
|
|
554
|
-
</div>
|
|
555
|
-
</div>
|
|
556
|
-
</div>
|
|
557
|
-
</div>
|
|
558
|
-
<div class="card-body">
|
|
559
|
-
<div class="flex items-center font-extrabold card-title">
|
|
560
|
-
Card Component
|
|
561
|
-
<div class="dropdown dropdown-top dropdown-end">
|
|
562
|
-
<div tabindex="0">
|
|
563
|
-
<div
|
|
564
|
-
tabindex="0"
|
|
565
|
-
class="inline-block mx-1 btn btn-circle btn-ghost btn-xs text-info"
|
|
566
|
-
>
|
|
567
|
-
<svg
|
|
568
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
569
|
-
fill="none"
|
|
570
|
-
viewBox="0 0 24 24"
|
|
571
|
-
class="inline w-5 h-5 stroke-current"
|
|
572
|
-
>
|
|
573
|
-
<path
|
|
574
|
-
stroke-linecap="round"
|
|
575
|
-
stroke-linejoin="round"
|
|
576
|
-
stroke-width="2"
|
|
577
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
578
|
-
/>
|
|
579
|
-
</svg>
|
|
580
|
-
</div>
|
|
581
|
-
</div>
|
|
582
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
583
|
-
<div
|
|
584
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
585
|
-
>
|
|
586
|
-
<div class="card-body">
|
|
587
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
588
|
-
dropdown component
|
|
589
|
-
</h2>
|
|
590
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
591
|
-
helper dropdown can show an element when focused.
|
|
592
|
-
</p>
|
|
593
|
-
<div class="flex justify-end mt-4">
|
|
594
|
-
<a
|
|
595
|
-
target="blank"
|
|
596
|
-
href="https://daisyui.com/components/dropdown"
|
|
597
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
598
|
-
>
|
|
599
|
-
See component
|
|
600
|
-
</a>
|
|
601
|
-
</div>
|
|
602
|
-
</div>
|
|
603
|
-
</div>
|
|
604
|
-
</div>
|
|
605
|
-
</div>
|
|
606
|
-
</div>
|
|
607
|
-
<div class="w-full dropdown">
|
|
608
|
-
<div tabindex="0">
|
|
609
|
-
<div class="mb-2">
|
|
610
|
-
<div class="badge badge-ghost">
|
|
611
|
-
May 14th
|
|
612
|
-
</div>
|
|
613
|
-
</div>
|
|
614
|
-
</div>
|
|
615
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
616
|
-
<div
|
|
617
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
618
|
-
>
|
|
619
|
-
<div class="card-body">
|
|
620
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
621
|
-
badge component
|
|
622
|
-
</h2>
|
|
623
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
624
|
-
Use badge component to highlight small inline items
|
|
625
|
-
</p>
|
|
626
|
-
<div class="flex justify-end mt-4">
|
|
627
|
-
<a
|
|
628
|
-
target="blank"
|
|
629
|
-
href="https://daisyui.com/components/badge"
|
|
630
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
631
|
-
>
|
|
632
|
-
See component
|
|
633
|
-
</a>
|
|
634
|
-
</div>
|
|
635
|
-
</div>
|
|
636
|
-
</div>
|
|
637
|
-
</div>
|
|
638
|
-
</div>
|
|
639
|
-
<p class="text-sm text-base-content text-opacity-80">
|
|
640
|
-
Use card component to easily show blog posts, products, features, items and more.
|
|
641
|
-
</p>
|
|
642
|
-
<div class="justify-end card-actions">
|
|
643
|
-
<div class="dropdown dropdown-top dropdown-end">
|
|
644
|
-
<div tabindex="0">
|
|
645
|
-
<button class="btn btn-primary">
|
|
646
|
-
Get Started
|
|
647
|
-
</button>
|
|
648
|
-
</div>
|
|
649
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
650
|
-
<div
|
|
651
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
652
|
-
>
|
|
653
|
-
<div class="card-body">
|
|
654
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
655
|
-
button component
|
|
656
|
-
</h2>
|
|
657
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
658
|
-
Buttons come in various shapes, colors and sizes
|
|
659
|
-
</p>
|
|
660
|
-
<div class="flex justify-end mt-4">
|
|
661
|
-
<a
|
|
662
|
-
target="blank"
|
|
663
|
-
href="https://daisyui.com/components/button"
|
|
664
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
665
|
-
>
|
|
666
|
-
See component
|
|
667
|
-
</a>
|
|
668
|
-
</div>
|
|
669
|
-
</div>
|
|
670
|
-
</div>
|
|
671
|
-
</div>
|
|
672
|
-
</div>
|
|
673
|
-
</div>
|
|
674
|
-
</div>
|
|
675
|
-
</div>
|
|
676
|
-
<div
|
|
677
|
-
class="flex flex-col flex-shrink-0 col-span-3 row-span-3 mx-2 xl:mx-0 w-72 place-self-start xl:w-full"
|
|
678
|
-
>
|
|
679
|
-
<div class="dropdown">
|
|
680
|
-
<div tabindex="0">
|
|
681
|
-
<div class="flex-grow-0 w-full tabs">
|
|
682
|
-
<button class="flex-1 tab tab-lifted tab-lg tab-border-none tab-active">
|
|
683
|
-
Stats
|
|
684
|
-
</button><button class="flex-1 tab tab-lifted tab-lg tab-border-none">
|
|
685
|
-
Info
|
|
686
|
-
</button><button class="flex-1 tab tab-lifted tab-lg tab-border-none">
|
|
687
|
-
Options
|
|
688
|
-
</button>
|
|
689
|
-
</div>
|
|
690
|
-
</div>
|
|
691
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
692
|
-
<div
|
|
693
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
694
|
-
>
|
|
695
|
-
<div class="card-body">
|
|
696
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
697
|
-
tab component
|
|
698
|
-
</h2>
|
|
699
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
700
|
-
Beautiful tabs to switch between sections
|
|
701
|
-
</p>
|
|
702
|
-
<div class="flex justify-end mt-4">
|
|
703
|
-
<a
|
|
704
|
-
target="blank"
|
|
705
|
-
href="https://daisyui.com/components/tab"
|
|
706
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
707
|
-
>
|
|
708
|
-
See component
|
|
709
|
-
</a>
|
|
710
|
-
</div>
|
|
711
|
-
</div>
|
|
712
|
-
</div>
|
|
713
|
-
</div>
|
|
714
|
-
</div>
|
|
715
|
-
<div
|
|
716
|
-
class="grid flex-grow w-full gap-3 p-6 rounded-tl-none shadow-xl rounded-xl bg-base-100"
|
|
717
|
-
>
|
|
718
|
-
<div class="flex items-center space-x-2">
|
|
719
|
-
<div class="dropdown">
|
|
720
|
-
<div tabindex="0">
|
|
721
|
-
<div class="avatar online">
|
|
722
|
-
<div class="w-16 h-16 p-px bg-opacity-10 mask mask-hexagon bg-base-content">
|
|
723
|
-
<img
|
|
724
|
-
src="https://daisyui.com/tailwind-css-component-profile-5@56w.png"
|
|
725
|
-
alt="Avatar Tailwind CSS Component"
|
|
726
|
-
class="mask mask-hexagon"
|
|
727
|
-
>
|
|
728
|
-
</div>
|
|
729
|
-
</div>
|
|
730
|
-
</div>
|
|
731
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
732
|
-
<div
|
|
733
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
734
|
-
>
|
|
735
|
-
<div class="card-body">
|
|
736
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
737
|
-
avatar component
|
|
738
|
-
</h2>
|
|
739
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
740
|
-
Use avatar component with any size
|
|
741
|
-
</p>
|
|
742
|
-
<div class="flex justify-end mt-4">
|
|
743
|
-
<a
|
|
744
|
-
target="blank"
|
|
745
|
-
href="https://daisyui.com/components/avatar"
|
|
746
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
747
|
-
>
|
|
748
|
-
See component
|
|
749
|
-
</a>
|
|
750
|
-
</div>
|
|
751
|
-
</div>
|
|
752
|
-
</div>
|
|
753
|
-
</div>
|
|
754
|
-
</div>
|
|
755
|
-
<div>
|
|
756
|
-
<div class="text-lg font-extrabold">
|
|
757
|
-
Beatrice Thurman
|
|
758
|
-
</div>
|
|
759
|
-
<div class="text-sm text-base-content text-opacity-60">
|
|
760
|
-
220 Followers
|
|
761
|
-
</div>
|
|
762
|
-
</div>
|
|
763
|
-
</div>
|
|
764
|
-
<div class="dropdown">
|
|
765
|
-
<div tabindex="0">
|
|
766
|
-
<div class="m-0 divider text-base-content text-opacity-40">
|
|
767
|
-
Reports
|
|
768
|
-
</div>
|
|
769
|
-
</div>
|
|
770
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
771
|
-
<div
|
|
772
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
773
|
-
>
|
|
774
|
-
<div class="card-body">
|
|
775
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
776
|
-
divider component
|
|
777
|
-
</h2>
|
|
778
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
779
|
-
User divider component to visually separate items
|
|
780
|
-
</p>
|
|
781
|
-
<div class="flex justify-end mt-4">
|
|
782
|
-
<a
|
|
783
|
-
target="blank"
|
|
784
|
-
href="https://daisyui.com/components/divider"
|
|
785
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
786
|
-
>
|
|
787
|
-
See component
|
|
788
|
-
</a>
|
|
789
|
-
</div>
|
|
790
|
-
</div>
|
|
791
|
-
</div>
|
|
792
|
-
</div>
|
|
793
|
-
</div>
|
|
794
|
-
<div class="text-lg font-extrabold">
|
|
795
|
-
Audience Report
|
|
796
|
-
</div>
|
|
797
|
-
<div class="grid gap-3">
|
|
798
|
-
<div class="dropdown dropdown-top">
|
|
799
|
-
<div tabindex="0">
|
|
800
|
-
<div class="flex items-center p-1">
|
|
801
|
-
<span class="w-48 text-xs text-base-content text-opacity-60">Search Engines</span>
|
|
802
|
-
<progress max="100" class="progress progress-success" value="50" />
|
|
803
|
-
</div>
|
|
804
|
-
<div class="flex items-center p-1">
|
|
805
|
-
<span class="w-48 text-xs text-base-content text-opacity-60">Direct</span>
|
|
806
|
-
<progress max="100" class="progress progress-primary" value="30" />
|
|
807
|
-
</div>
|
|
808
|
-
<div class="flex items-center p-1">
|
|
809
|
-
<span class="w-48 text-xs text-base-content text-opacity-60">Social Media</span>
|
|
810
|
-
<progress max="100" class="progress progress-secondary" value="70" />
|
|
811
|
-
</div>
|
|
812
|
-
<div class="flex items-center p-1">
|
|
813
|
-
<span class="w-48 text-xs text-base-content text-opacity-60">Emails</span>
|
|
814
|
-
<progress max="100" class="progress progress-accent" value="90" />
|
|
815
|
-
</div>
|
|
816
|
-
<div class="flex items-center p-1">
|
|
817
|
-
<span class="w-48 text-xs text-base-content text-opacity-60">Ad campaigns</span>
|
|
818
|
-
<progress max="100" class="progress progress-warning" value="65" />
|
|
819
|
-
</div>
|
|
820
|
-
</div>
|
|
821
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
822
|
-
<div
|
|
823
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
824
|
-
>
|
|
825
|
-
<div class="card-body">
|
|
826
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
827
|
-
progress component
|
|
828
|
-
</h2>
|
|
829
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
830
|
-
Show progressbar, loadings or simple bar charts using progress component
|
|
831
|
-
</p>
|
|
832
|
-
<div class="flex justify-end mt-4">
|
|
833
|
-
<a
|
|
834
|
-
target="blank"
|
|
835
|
-
href="https://daisyui.com/components/progress"
|
|
836
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
837
|
-
>
|
|
838
|
-
See component
|
|
839
|
-
</a>
|
|
840
|
-
</div>
|
|
841
|
-
</div>
|
|
842
|
-
</div>
|
|
843
|
-
</div>
|
|
844
|
-
</div>
|
|
845
|
-
</div>
|
|
846
|
-
</div>
|
|
847
|
-
</div>
|
|
848
|
-
<div
|
|
849
|
-
class="flex flex-col justify-center flex-shrink-0 col-span-3 row-span-1 mx-2 xl:mx-0 w-72 xl:w-auto"
|
|
850
|
-
>
|
|
851
|
-
<div class="w-full dropdown dropdown-end">
|
|
852
|
-
<div tabindex="0">
|
|
853
|
-
<div class="flex items-center justify-around px-6">
|
|
854
|
-
<div class="avatar online">
|
|
855
|
-
<div class="w-16 h-16 p-1 mask mask-squircle bg-base-100">
|
|
856
|
-
<img
|
|
857
|
-
src="https://daisyui.com/tailwind-css-component-profile-3@56w.png"
|
|
858
|
-
alt="Avatar Tailwind CSS Component"
|
|
859
|
-
class="mask mask-squircle"
|
|
860
|
-
>
|
|
861
|
-
</div>
|
|
862
|
-
</div>
|
|
863
|
-
<div class="avatar online">
|
|
864
|
-
<div class="w-16 h-16 p-1 mask mask-squircle bg-base-100">
|
|
865
|
-
<img
|
|
866
|
-
src="https://daisyui.com/tailwind-css-component-profile-2@56w.png"
|
|
867
|
-
alt="Avatar Tailwind CSS Component"
|
|
868
|
-
class="mask mask-squircle"
|
|
869
|
-
>
|
|
870
|
-
</div>
|
|
871
|
-
</div>
|
|
872
|
-
<div class="avatar offline">
|
|
873
|
-
<div class="w-16 h-16 p-1 mask mask-squircle bg-base-100">
|
|
874
|
-
<img
|
|
875
|
-
src="https://daisyui.com/tailwind-css-component-profile-4@56w.png"
|
|
876
|
-
alt="Avatar Tailwind CSS Component"
|
|
877
|
-
class="mask mask-squircle"
|
|
878
|
-
>
|
|
879
|
-
</div>
|
|
880
|
-
</div>
|
|
881
|
-
<div class="avatar">
|
|
882
|
-
<div class="w-16 h-16 p-1 mask mask-squircle bg-base-100">
|
|
883
|
-
<img
|
|
884
|
-
src="https://daisyui.com/tailwind-css-component-profile-5@56w.png"
|
|
885
|
-
alt="Avatar Tailwind CSS Component"
|
|
886
|
-
class="mask mask-squircle"
|
|
887
|
-
>
|
|
888
|
-
</div>
|
|
889
|
-
</div>
|
|
890
|
-
</div>
|
|
891
|
-
</div>
|
|
892
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
893
|
-
<div
|
|
894
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
895
|
-
>
|
|
896
|
-
<div class="card-body">
|
|
897
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
898
|
-
avatar component
|
|
899
|
-
</h2>
|
|
900
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
901
|
-
Use avatar component with any size
|
|
902
|
-
</p>
|
|
903
|
-
<div class="flex justify-end mt-4">
|
|
904
|
-
<a
|
|
905
|
-
target="blank"
|
|
906
|
-
href="https://daisyui.com/components/avatar"
|
|
907
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
908
|
-
>
|
|
909
|
-
See component
|
|
910
|
-
</a>
|
|
911
|
-
</div>
|
|
912
|
-
</div>
|
|
913
|
-
</div>
|
|
914
|
-
</div>
|
|
915
|
-
</div>
|
|
916
|
-
</div>
|
|
917
|
-
<div
|
|
918
|
-
class="grid flex-shrink-0 col-span-3 row-span-4 mx-2 shadow-xl rounded-box bg-base-100 text-base-content xl:mx-0 w-72 xl:w-auto xl:place-self-stretch"
|
|
919
|
-
>
|
|
920
|
-
<div class="grid w-full grid-cols-1 gap-4 p-4">
|
|
921
|
-
<div class="dropdown">
|
|
922
|
-
<div tabindex="0">
|
|
923
|
-
<div class="grid w-full grid-cols-2 gap-4">
|
|
924
|
-
<button class="btn btn-block">
|
|
925
|
-
Neutral
|
|
926
|
-
</button>
|
|
927
|
-
<button class="btn btn-block btn-primary">
|
|
928
|
-
primary
|
|
929
|
-
</button>
|
|
930
|
-
<button class="btn btn-block btn-secondary">
|
|
931
|
-
secondary
|
|
932
|
-
</button>
|
|
933
|
-
<button class="btn btn-block btn-accent">
|
|
934
|
-
accent
|
|
935
|
-
</button>
|
|
936
|
-
<button class="btn btn-block btn-info">
|
|
937
|
-
info
|
|
938
|
-
</button>
|
|
939
|
-
<button class="btn btn-block btn-success">
|
|
940
|
-
success
|
|
941
|
-
</button>
|
|
942
|
-
</div>
|
|
943
|
-
</div>
|
|
944
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
945
|
-
<div
|
|
946
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
947
|
-
>
|
|
948
|
-
<div class="card-body">
|
|
949
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
950
|
-
button component
|
|
951
|
-
</h2>
|
|
952
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
953
|
-
Buttons come in various shapes, colors and sizes
|
|
954
|
-
</p>
|
|
955
|
-
<div class="flex justify-end mt-4">
|
|
956
|
-
<a
|
|
957
|
-
target="blank"
|
|
958
|
-
href="https://daisyui.com/components/button"
|
|
959
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
960
|
-
>
|
|
961
|
-
See component
|
|
962
|
-
</a>
|
|
963
|
-
</div>
|
|
964
|
-
</div>
|
|
965
|
-
</div>
|
|
966
|
-
</div>
|
|
967
|
-
</div>
|
|
968
|
-
<div class="dropdown dropdown-top">
|
|
969
|
-
<div tabindex="0">
|
|
970
|
-
<div class="grid w-full grid-cols-2 gap-4">
|
|
971
|
-
<button class="btn btn-block btn-warning">
|
|
972
|
-
warning
|
|
973
|
-
</button>
|
|
974
|
-
<button class="btn btn-block btn-error">
|
|
975
|
-
error
|
|
976
|
-
</button>
|
|
977
|
-
<button class="btn btn-block btn-outline">
|
|
978
|
-
outline
|
|
979
|
-
</button>
|
|
980
|
-
<button class="btn btn-block btn-outline btn-primary">
|
|
981
|
-
primary
|
|
982
|
-
</button>
|
|
983
|
-
<button class="btn btn-block btn-outline btn-secondary">
|
|
984
|
-
secondary
|
|
985
|
-
</button>
|
|
986
|
-
<button class="btn btn-block btn-outline btn-accent">
|
|
987
|
-
accent
|
|
988
|
-
</button>
|
|
989
|
-
<button class="btn btn-block btn-ghost">
|
|
990
|
-
ghost
|
|
991
|
-
</button>
|
|
992
|
-
<button class="btn btn-block btn-link">
|
|
993
|
-
link
|
|
994
|
-
</button>
|
|
995
|
-
</div>
|
|
996
|
-
</div>
|
|
997
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
998
|
-
<div
|
|
999
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1000
|
-
>
|
|
1001
|
-
<div class="card-body">
|
|
1002
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1003
|
-
button component
|
|
1004
|
-
</h2>
|
|
1005
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1006
|
-
Buttons come in various shapes, colors and sizes
|
|
1007
|
-
</p>
|
|
1008
|
-
<div class="flex justify-end mt-4">
|
|
1009
|
-
<a
|
|
1010
|
-
target="blank"
|
|
1011
|
-
href="https://daisyui.com/components/button"
|
|
1012
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1013
|
-
>
|
|
1014
|
-
See component
|
|
1015
|
-
</a>
|
|
1016
|
-
</div>
|
|
1017
|
-
</div>
|
|
1018
|
-
</div>
|
|
1019
|
-
</div>
|
|
1020
|
-
</div>
|
|
1021
|
-
</div>
|
|
1022
|
-
</div>
|
|
1023
|
-
<div class="grid flex-shrink-0 col-span-3 row-span-2 gap-4 mx-2 xl:mx-0 w-72 xl:w-auto">
|
|
1024
|
-
<div class="dropdown dropdown-end dropdown-top">
|
|
1025
|
-
<div tabindex="0">
|
|
1026
|
-
<div class="grid gap-4">
|
|
1027
|
-
<div class="flex btn-group">
|
|
1028
|
-
<button class="flex-1 btn">
|
|
1029
|
-
1
|
|
1030
|
-
</button>
|
|
1031
|
-
<button class="flex-1 btn btn-active">
|
|
1032
|
-
2
|
|
1033
|
-
</button>
|
|
1034
|
-
<button class="flex-1 btn">
|
|
1035
|
-
3
|
|
1036
|
-
</button> <button class="flex-1 btn">
|
|
1037
|
-
4
|
|
1038
|
-
</button>
|
|
1039
|
-
<button class="flex-1 btn">
|
|
1040
|
-
5
|
|
1041
|
-
</button>
|
|
1042
|
-
</div>
|
|
1043
|
-
<div class="flex btn-group">
|
|
1044
|
-
<button class="flex-1 btn btn-outline">
|
|
1045
|
-
1
|
|
1046
|
-
</button>
|
|
1047
|
-
<button class="flex-1 btn btn-outline">
|
|
1048
|
-
2
|
|
1049
|
-
</button>
|
|
1050
|
-
<button class="flex-1 btn btn-outline">
|
|
1051
|
-
3
|
|
1052
|
-
</button>
|
|
1053
|
-
<button class="flex-1 btn btn-outline">
|
|
1054
|
-
4
|
|
1055
|
-
</button>
|
|
1056
|
-
<button class="flex-1 btn btn-outline">
|
|
1057
|
-
5
|
|
1058
|
-
</button>
|
|
1059
|
-
</div>
|
|
1060
|
-
</div>
|
|
1061
|
-
</div>
|
|
1062
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1063
|
-
<div
|
|
1064
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1065
|
-
>
|
|
1066
|
-
<div class="card-body">
|
|
1067
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1068
|
-
pagination component
|
|
1069
|
-
</h2>
|
|
1070
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1071
|
-
Pagination buttons in many colors and sizes!
|
|
1072
|
-
</p>
|
|
1073
|
-
<div class="flex justify-end mt-4">
|
|
1074
|
-
<a
|
|
1075
|
-
target="blank"
|
|
1076
|
-
href="https://daisyui.com/components/pagination"
|
|
1077
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1078
|
-
>
|
|
1079
|
-
See component
|
|
1080
|
-
</a>
|
|
1081
|
-
</div>
|
|
1082
|
-
</div>
|
|
1083
|
-
</div>
|
|
1084
|
-
</div>
|
|
1085
|
-
</div>
|
|
1086
|
-
<div class="dropdown dropdown-end dropdown-top">
|
|
1087
|
-
<div tabindex="0">
|
|
1088
|
-
<div class="items-center tabs tabs-boxed">
|
|
1089
|
-
<button class="flex-1 tab">
|
|
1090
|
-
Tab 1
|
|
1091
|
-
</button>
|
|
1092
|
-
<button class="flex-1 tab tab-active">
|
|
1093
|
-
Tab 2
|
|
1094
|
-
</button>
|
|
1095
|
-
<button class="flex-1 tab">
|
|
1096
|
-
Tab 3
|
|
1097
|
-
</button>
|
|
1098
|
-
</div>
|
|
1099
|
-
</div>
|
|
1100
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1101
|
-
<div
|
|
1102
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1103
|
-
>
|
|
1104
|
-
<div class="card-body">
|
|
1105
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1106
|
-
tab component
|
|
1107
|
-
</h2>
|
|
1108
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1109
|
-
Tab component with several sizes and styles
|
|
1110
|
-
</p>
|
|
1111
|
-
<div class="flex justify-end mt-4">
|
|
1112
|
-
<a
|
|
1113
|
-
target="blank"
|
|
1114
|
-
href="https://daisyui.com/components/tab"
|
|
1115
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1116
|
-
>
|
|
1117
|
-
See component
|
|
1118
|
-
</a>
|
|
1119
|
-
</div>
|
|
1120
|
-
</div>
|
|
1121
|
-
</div>
|
|
1122
|
-
</div>
|
|
1123
|
-
</div>
|
|
1124
|
-
</div>
|
|
1125
|
-
<div
|
|
1126
|
-
class="grid items-stretch flex-shrink-0 col-span-3 row-span-3 mx-2 shadow-xl text-base-content bg-base-100 rounded-box xl:mx-0 w-72 xl:w-auto xl:place-self-stretch"
|
|
1127
|
-
>
|
|
1128
|
-
<div class="grid gap-4 p-4 place-content-center">
|
|
1129
|
-
<div class="dropdown dropdown-end">
|
|
1130
|
-
<div tabindex="0">
|
|
1131
|
-
<div class="flex-col space-y-2 alert">
|
|
1132
|
-
<div class="flex-1">
|
|
1133
|
-
<label class="mx-3 text-sm">Lorem ipsum dolor sit amet, consectetur adip!</label>
|
|
1134
|
-
</div>
|
|
1135
|
-
<div class="flex-none">
|
|
1136
|
-
<button class="mr-2 btn btn-sm btn-primary btn-outline">
|
|
1137
|
-
Cancel
|
|
1138
|
-
</button>
|
|
1139
|
-
<button class="btn btn-sm btn-primary">
|
|
1140
|
-
Apply
|
|
1141
|
-
</button>
|
|
1142
|
-
</div>
|
|
1143
|
-
</div>
|
|
1144
|
-
</div>
|
|
1145
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1146
|
-
<div
|
|
1147
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1148
|
-
>
|
|
1149
|
-
<div class="card-body">
|
|
1150
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1151
|
-
alert component
|
|
1152
|
-
</h2>
|
|
1153
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1154
|
-
Show alerts, warnings, notification or other info
|
|
1155
|
-
</p>
|
|
1156
|
-
<div class="flex justify-end mt-4">
|
|
1157
|
-
<a
|
|
1158
|
-
target="blank"
|
|
1159
|
-
href="https://daisyui.com/components/alert"
|
|
1160
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1161
|
-
>
|
|
1162
|
-
See component
|
|
1163
|
-
</a>
|
|
1164
|
-
</div>
|
|
1165
|
-
</div>
|
|
1166
|
-
</div>
|
|
1167
|
-
</div>
|
|
1168
|
-
</div>
|
|
1169
|
-
<div class="dropdown dropdown-end dropdown-top">
|
|
1170
|
-
<div tabindex="0">
|
|
1171
|
-
<div class="alert alert-info">
|
|
1172
|
-
<div class="flex-1">
|
|
1173
|
-
<svg
|
|
1174
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1175
|
-
fill="none"
|
|
1176
|
-
viewBox="0 0 24 24"
|
|
1177
|
-
class="w-6 h-6 mx-2 stroke-current"
|
|
1178
|
-
>
|
|
1179
|
-
<path
|
|
1180
|
-
stroke-linecap="round"
|
|
1181
|
-
stroke-linejoin="round"
|
|
1182
|
-
stroke-width="2"
|
|
1183
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
1184
|
-
/>
|
|
1185
|
-
</svg>
|
|
1186
|
-
<label class="text-sm">Lorem ipsum dolor sit amet, consectetur adip!</label>
|
|
1187
|
-
</div>
|
|
1188
|
-
</div>
|
|
1189
|
-
</div>
|
|
1190
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1191
|
-
<div
|
|
1192
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1193
|
-
>
|
|
1194
|
-
<div class="card-body">
|
|
1195
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1196
|
-
alert component
|
|
1197
|
-
</h2>
|
|
1198
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1199
|
-
Show alerts, warnings, notification or other info
|
|
1200
|
-
</p>
|
|
1201
|
-
<div class="flex justify-end mt-4">
|
|
1202
|
-
<a
|
|
1203
|
-
target="blank"
|
|
1204
|
-
href="https://daisyui.com/components/alert"
|
|
1205
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1206
|
-
>
|
|
1207
|
-
See component
|
|
1208
|
-
</a>
|
|
1209
|
-
</div>
|
|
1210
|
-
</div>
|
|
1211
|
-
</div>
|
|
1212
|
-
</div>
|
|
1213
|
-
</div>
|
|
1214
|
-
<div class="dropdown dropdown-end dropdown-top">
|
|
1215
|
-
<div tabindex="0">
|
|
1216
|
-
<div class="alert alert-success">
|
|
1217
|
-
<div class="flex-1">
|
|
1218
|
-
<svg
|
|
1219
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1220
|
-
fill="none"
|
|
1221
|
-
viewBox="0 0 24 24"
|
|
1222
|
-
class="w-6 h-6 mx-2 stroke-current"
|
|
1223
|
-
>
|
|
1224
|
-
<path
|
|
1225
|
-
stroke-linecap="round"
|
|
1226
|
-
stroke-linejoin="round"
|
|
1227
|
-
stroke-width="2"
|
|
1228
|
-
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
|
1229
|
-
/>
|
|
1230
|
-
</svg>
|
|
1231
|
-
<label class="text-sm">Lorem ipsum dolor sit amet, consectetur adip!</label>
|
|
1232
|
-
</div>
|
|
1233
|
-
</div>
|
|
1234
|
-
</div>
|
|
1235
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1236
|
-
<div
|
|
1237
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1238
|
-
>
|
|
1239
|
-
<div class="card-body">
|
|
1240
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1241
|
-
alert component
|
|
1242
|
-
</h2>
|
|
1243
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1244
|
-
Show alerts, warnings, notification or other info
|
|
1245
|
-
</p>
|
|
1246
|
-
<div class="flex justify-end mt-4">
|
|
1247
|
-
<a
|
|
1248
|
-
target="blank"
|
|
1249
|
-
href="https://daisyui.com/components/alert"
|
|
1250
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1251
|
-
>
|
|
1252
|
-
See component
|
|
1253
|
-
</a>
|
|
1254
|
-
</div>
|
|
1255
|
-
</div>
|
|
1256
|
-
</div>
|
|
1257
|
-
</div>
|
|
1258
|
-
</div>
|
|
1259
|
-
</div>
|
|
1260
|
-
</div>
|
|
1261
|
-
<div
|
|
1262
|
-
class="grid flex-shrink-0 col-span-3 row-span-2 gap-4 mx-2 xl:mx-0 w-72 xl:w-auto xl:place-self-stretch"
|
|
1263
|
-
>
|
|
1264
|
-
<div class="shadow-xl rounded-box bg-base-100 text-base-content">
|
|
1265
|
-
<div class="w-full dropdown dropdown-end">
|
|
1266
|
-
<div tabindex="0">
|
|
1267
|
-
<ul class="py-3 overflow-visible menu">
|
|
1268
|
-
<li class="menu-title">
|
|
1269
|
-
<span> Menu Title </span>
|
|
1270
|
-
</li>
|
|
1271
|
-
<li>
|
|
1272
|
-
<a tabindex="0" href="javascript://"><svg
|
|
1273
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1274
|
-
fill="none"
|
|
1275
|
-
viewBox="0 0 24 24"
|
|
1276
|
-
class="inline-block w-5 h-5 mr-2 stroke-current"
|
|
1277
|
-
>
|
|
1278
|
-
<path
|
|
1279
|
-
stroke-linecap="round"
|
|
1280
|
-
stroke-linejoin="round"
|
|
1281
|
-
stroke-width="2"
|
|
1282
|
-
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
|
|
1283
|
-
/>
|
|
1284
|
-
</svg>
|
|
1285
|
-
Menu Item 1
|
|
1286
|
-
</a>
|
|
1287
|
-
</li>
|
|
1288
|
-
<li>
|
|
1289
|
-
<a tabindex="0" href="javascript://"><svg
|
|
1290
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1291
|
-
fill="none"
|
|
1292
|
-
viewBox="0 0 24 24"
|
|
1293
|
-
class="inline-block w-5 h-5 mr-2 stroke-current"
|
|
1294
|
-
>
|
|
1295
|
-
<path
|
|
1296
|
-
stroke-linecap="round"
|
|
1297
|
-
stroke-linejoin="round"
|
|
1298
|
-
stroke-width="2"
|
|
1299
|
-
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
1300
|
-
/>
|
|
1301
|
-
</svg>
|
|
1302
|
-
Menu Item 2
|
|
1303
|
-
</a>
|
|
1304
|
-
</li>
|
|
1305
|
-
<li>
|
|
1306
|
-
<a tabindex="0" href="javascript://"><svg
|
|
1307
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1308
|
-
fill="none"
|
|
1309
|
-
viewBox="0 0 24 24"
|
|
1310
|
-
class="inline-block w-5 h-5 mr-2 stroke-current"
|
|
1311
|
-
>
|
|
1312
|
-
<path
|
|
1313
|
-
stroke-linecap="round"
|
|
1314
|
-
stroke-linejoin="round"
|
|
1315
|
-
stroke-width="2"
|
|
1316
|
-
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
|
1317
|
-
/>
|
|
1318
|
-
</svg>
|
|
1319
|
-
Menu Item 3
|
|
1320
|
-
<div class="ml-2 badge success">new</div></a>
|
|
1321
|
-
</li>
|
|
1322
|
-
</ul>
|
|
1323
|
-
</div>
|
|
1324
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1325
|
-
<div
|
|
1326
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1327
|
-
>
|
|
1328
|
-
<div class="card-body">
|
|
1329
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1330
|
-
menu component
|
|
1331
|
-
</h2>
|
|
1332
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1333
|
-
Use it for sidebar or any other list of items
|
|
1334
|
-
</p>
|
|
1335
|
-
<div class="flex justify-end mt-4">
|
|
1336
|
-
<a
|
|
1337
|
-
target="blank"
|
|
1338
|
-
href="https://daisyui.com/components/menu"
|
|
1339
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1340
|
-
>
|
|
1341
|
-
See component
|
|
1342
|
-
</a>
|
|
1343
|
-
</div>
|
|
1344
|
-
</div>
|
|
1345
|
-
</div>
|
|
1346
|
-
</div>
|
|
1347
|
-
</div>
|
|
1348
|
-
</div>
|
|
1349
|
-
</div>
|
|
1350
|
-
<div class="grid flex-shrink-0 col-span-3 row-span-1 gap-4 mx-2 xl:mx-0 w-72 xl:w-auto">
|
|
1351
|
-
<div class="shadow-xl bg-base-100 text-base-content rounded-box">
|
|
1352
|
-
<div class="w-full dropdown dropdown-end dropdown-top">
|
|
1353
|
-
<div tabindex="0">
|
|
1354
|
-
<div class="flex justify-around p-4 space-x-4">
|
|
1355
|
-
<label aria-label="checkbox CSS component"><input type="checkbox" checked class="checkbox"></label>
|
|
1356
|
-
<label aria-label="checkbox CSS component"><input type="checkbox" checked class="checkbox checkbox-primary"></label>
|
|
1357
|
-
<label aria-label="checkbox CSS component"><input type="checkbox" checked class="checkbox checkbox-secondary"></label>
|
|
1358
|
-
<label aria-label="checkbox CSS component"><input type="checkbox" checked class="checkbox checkbox-accent"></label>
|
|
1359
|
-
</div>
|
|
1360
|
-
</div>
|
|
1361
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1362
|
-
<div
|
|
1363
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1364
|
-
>
|
|
1365
|
-
<div class="card-body">
|
|
1366
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1367
|
-
checkbox component
|
|
1368
|
-
</h2>
|
|
1369
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1370
|
-
Colorful, animated and accessible
|
|
1371
|
-
</p>
|
|
1372
|
-
<div class="flex justify-end mt-4">
|
|
1373
|
-
<a
|
|
1374
|
-
target="blank"
|
|
1375
|
-
href="https://daisyui.com/components/form/checkbox"
|
|
1376
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1377
|
-
>
|
|
1378
|
-
See component
|
|
1379
|
-
</a>
|
|
1380
|
-
</div>
|
|
1381
|
-
</div>
|
|
1382
|
-
</div>
|
|
1383
|
-
</div>
|
|
1384
|
-
</div>
|
|
1385
|
-
<div class="w-full dropdown dropdown-end">
|
|
1386
|
-
<div tabindex="0">
|
|
1387
|
-
<div class="flex justify-around p-4 space-x-4">
|
|
1388
|
-
<label aria-label="radio CSS component"><input type="radio" name="opt" class="radio"></label>
|
|
1389
|
-
<label aria-label="radio CSS component"><input type="radio" name="opt" class="radio radio-primary"></label>
|
|
1390
|
-
<label aria-label="radio CSS component"><input type="radio" name="opt" class="radio radio-secondary"></label>
|
|
1391
|
-
<label aria-label="radio CSS component"><input type="radio" name="opt" class="radio radio-accent"></label>
|
|
1392
|
-
</div>
|
|
1393
|
-
</div>
|
|
1394
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1395
|
-
<div
|
|
1396
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1397
|
-
>
|
|
1398
|
-
<div class="card-body">
|
|
1399
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1400
|
-
radio component
|
|
1401
|
-
</h2>
|
|
1402
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1403
|
-
Colorful, animated and accessible
|
|
1404
|
-
</p>
|
|
1405
|
-
<div class="flex justify-end mt-4">
|
|
1406
|
-
<a
|
|
1407
|
-
target="blank"
|
|
1408
|
-
href="https://daisyui.com/components/form/radio"
|
|
1409
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1410
|
-
>
|
|
1411
|
-
See component
|
|
1412
|
-
</a>
|
|
1413
|
-
</div>
|
|
1414
|
-
</div>
|
|
1415
|
-
</div>
|
|
1416
|
-
</div>
|
|
1417
|
-
</div>
|
|
1418
|
-
</div>
|
|
1419
|
-
</div>
|
|
1420
|
-
<div class="grid flex-shrink-0 col-span-3 row-span-1 gap-4 mx-2 xl:mx-0 w-72 xl:w-auto">
|
|
1421
|
-
<div
|
|
1422
|
-
class="flex items-center shadow-xl text-primary-content bg-neutral text-neutral-content rounded-box"
|
|
1423
|
-
>
|
|
1424
|
-
<div class="dropdown dropdown-top">
|
|
1425
|
-
<div tabindex="0">
|
|
1426
|
-
<div class="px-4 text-sm breadcrumbs">
|
|
1427
|
-
<ul>
|
|
1428
|
-
<li>
|
|
1429
|
-
<a href="javascript://"><svg
|
|
1430
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1431
|
-
fill="none"
|
|
1432
|
-
viewBox="0 0 24 24"
|
|
1433
|
-
class="w-4 h-4 mr-2 stroke-current"
|
|
1434
|
-
>
|
|
1435
|
-
<path
|
|
1436
|
-
stroke-linecap="round"
|
|
1437
|
-
stroke-linejoin="round"
|
|
1438
|
-
stroke-width="2"
|
|
1439
|
-
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
|
1440
|
-
/>
|
|
1441
|
-
</svg>
|
|
1442
|
-
Documents
|
|
1443
|
-
</a>
|
|
1444
|
-
</li>
|
|
1445
|
-
<li>
|
|
1446
|
-
<a href="javascript://"><svg
|
|
1447
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1448
|
-
fill="none"
|
|
1449
|
-
viewBox="0 0 24 24"
|
|
1450
|
-
class="w-4 h-4 mr-2 stroke-current"
|
|
1451
|
-
>
|
|
1452
|
-
<path
|
|
1453
|
-
stroke-linecap="round"
|
|
1454
|
-
stroke-linejoin="round"
|
|
1455
|
-
stroke-width="2"
|
|
1456
|
-
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
1457
|
-
/>
|
|
1458
|
-
</svg>
|
|
1459
|
-
Add Document
|
|
1460
|
-
</a>
|
|
1461
|
-
</li>
|
|
1462
|
-
</ul>
|
|
1463
|
-
</div>
|
|
1464
|
-
</div>
|
|
1465
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1466
|
-
<div
|
|
1467
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1468
|
-
>
|
|
1469
|
-
<div class="card-body">
|
|
1470
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1471
|
-
breadcrumbs component
|
|
1472
|
-
</h2>
|
|
1473
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1474
|
-
Make a better navigation with breadcrumbs!
|
|
1475
|
-
</p>
|
|
1476
|
-
<div class="flex justify-end mt-4">
|
|
1477
|
-
<a
|
|
1478
|
-
target="blank"
|
|
1479
|
-
href="https://daisyui.com/components/breadcrumbs"
|
|
1480
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1481
|
-
>
|
|
1482
|
-
See component
|
|
1483
|
-
</a>
|
|
1484
|
-
</div>
|
|
1485
|
-
</div>
|
|
1486
|
-
</div>
|
|
1487
|
-
</div>
|
|
1488
|
-
</div>
|
|
1489
|
-
</div>
|
|
1490
|
-
<div class="flex items-center p-4 shadow-xl rounded-box bg-accent text-accent-content">
|
|
1491
|
-
<div class="flex-1 px-2">
|
|
1492
|
-
<h2 class="text-3xl font-extrabold">
|
|
1493
|
-
4,600
|
|
1494
|
-
</h2>
|
|
1495
|
-
<p class="text-sm text-opacity-80">
|
|
1496
|
-
Page views
|
|
1497
|
-
</p>
|
|
1498
|
-
</div>
|
|
1499
|
-
<div class="flex-0">
|
|
1500
|
-
<div class="dropdown dropdown-top dropdown-end">
|
|
1501
|
-
<div tabindex="0">
|
|
1502
|
-
<div class="flex space-x-1">
|
|
1503
|
-
<button class="btn btn-ghost btn-square" aria-label="button component">
|
|
1504
|
-
<svg
|
|
1505
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1506
|
-
fill="none"
|
|
1507
|
-
viewBox="0 0 24 24"
|
|
1508
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
1509
|
-
>
|
|
1510
|
-
<path
|
|
1511
|
-
stroke-linecap="round"
|
|
1512
|
-
stroke-linejoin="round"
|
|
1513
|
-
stroke-width="2"
|
|
1514
|
-
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
1515
|
-
/>
|
|
1516
|
-
<path
|
|
1517
|
-
stroke-linecap="round"
|
|
1518
|
-
stroke-linejoin="round"
|
|
1519
|
-
stroke-width="2"
|
|
1520
|
-
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
|
1521
|
-
/>
|
|
1522
|
-
</svg>
|
|
1523
|
-
</button>
|
|
1524
|
-
<button class="btn btn-ghost btn-square" aria-label="button component">
|
|
1525
|
-
<svg
|
|
1526
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1527
|
-
fill="none"
|
|
1528
|
-
viewBox="0 0 24 24"
|
|
1529
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
1530
|
-
>
|
|
1531
|
-
<path
|
|
1532
|
-
stroke-linecap="round"
|
|
1533
|
-
stroke-linejoin="round"
|
|
1534
|
-
stroke-width="2"
|
|
1535
|
-
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
|
|
1536
|
-
/>
|
|
1537
|
-
</svg>
|
|
1538
|
-
</button>
|
|
1539
|
-
</div>
|
|
1540
|
-
</div>
|
|
1541
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1542
|
-
<div
|
|
1543
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1544
|
-
>
|
|
1545
|
-
<div class="card-body">
|
|
1546
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1547
|
-
button component
|
|
1548
|
-
</h2>
|
|
1549
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1550
|
-
Buttons come in various shapes, colors and sizes
|
|
1551
|
-
</p>
|
|
1552
|
-
<div class="flex justify-end mt-4">
|
|
1553
|
-
<a
|
|
1554
|
-
target="blank"
|
|
1555
|
-
href="https://daisyui.com/components/button"
|
|
1556
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1557
|
-
>
|
|
1558
|
-
See component
|
|
1559
|
-
</a>
|
|
1560
|
-
</div>
|
|
1561
|
-
</div>
|
|
1562
|
-
</div>
|
|
1563
|
-
</div>
|
|
1564
|
-
</div>
|
|
1565
|
-
</div>
|
|
1566
|
-
</div>
|
|
1567
|
-
</div>
|
|
1568
|
-
<div
|
|
1569
|
-
class="flex-shrink-0 col-span-3 row-span-1 mx-2 overflow-visible shadow-lg card bg-base-100 xl:mx-0 w-72 xl:w-auto xl:place-self-stretch"
|
|
1570
|
-
>
|
|
1571
|
-
<div class="flex-row items-center px-4 space-x-4 card-body">
|
|
1572
|
-
<div class="flex-1">
|
|
1573
|
-
<h2 class="flex mb-0 card-title">
|
|
1574
|
-
<div class="dropdown dropdown-top">
|
|
1575
|
-
<div tabindex="0">
|
|
1576
|
-
<button
|
|
1577
|
-
aria-label="loading button"
|
|
1578
|
-
class="btn btn-ghost btn-sm btn-circle loading"
|
|
1579
|
-
/>
|
|
1580
|
-
</div>
|
|
1581
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1582
|
-
<div
|
|
1583
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1584
|
-
>
|
|
1585
|
-
<div class="card-body">
|
|
1586
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1587
|
-
loading button component
|
|
1588
|
-
</h2>
|
|
1589
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1590
|
-
Buttons can get loadings state using a simple class
|
|
1591
|
-
</p>
|
|
1592
|
-
<div class="flex justify-end mt-4">
|
|
1593
|
-
<a
|
|
1594
|
-
target="blank"
|
|
1595
|
-
href="https://daisyui.com/components/button"
|
|
1596
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1597
|
-
>
|
|
1598
|
-
See component
|
|
1599
|
-
</a>
|
|
1600
|
-
</div>
|
|
1601
|
-
</div>
|
|
1602
|
-
</div>
|
|
1603
|
-
</div>
|
|
1604
|
-
</div>
|
|
1605
|
-
Downloading...
|
|
1606
|
-
</h2>
|
|
1607
|
-
<div class="w-full dropdown dropdown-top">
|
|
1608
|
-
<div tabindex="0">
|
|
1609
|
-
<progress value="70" max="100" class="progress progress-secondary" />
|
|
1610
|
-
</div>
|
|
1611
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1612
|
-
<div
|
|
1613
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1614
|
-
>
|
|
1615
|
-
<div class="card-body">
|
|
1616
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1617
|
-
progress component
|
|
1618
|
-
</h2>
|
|
1619
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1620
|
-
Show progressbar, loadings or simple bar charts using progress component
|
|
1621
|
-
</p>
|
|
1622
|
-
<div class="flex justify-end mt-4">
|
|
1623
|
-
<a
|
|
1624
|
-
target="blank"
|
|
1625
|
-
href="https://daisyui.com/components/progress"
|
|
1626
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1627
|
-
>
|
|
1628
|
-
See component
|
|
1629
|
-
</a>
|
|
1630
|
-
</div>
|
|
1631
|
-
</div>
|
|
1632
|
-
</div>
|
|
1633
|
-
</div>
|
|
1634
|
-
</div>
|
|
1635
|
-
</div>
|
|
1636
|
-
<div class="flex-0">
|
|
1637
|
-
<div class="dropdown dropdown-top dropdown-end">
|
|
1638
|
-
<div tabindex="0">
|
|
1639
|
-
<button aria-label="circle button component" class="btn btn-circle">
|
|
1640
|
-
<svg
|
|
1641
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1642
|
-
fill="none"
|
|
1643
|
-
viewBox="0 0 24 24"
|
|
1644
|
-
class="inline-block w-6 h-6 stroke-current"
|
|
1645
|
-
>
|
|
1646
|
-
<path
|
|
1647
|
-
stroke-linecap="round"
|
|
1648
|
-
stroke-linejoin="round"
|
|
1649
|
-
stroke-width="2"
|
|
1650
|
-
d="M6 18L18 6M6 6l12 12"
|
|
1651
|
-
/>
|
|
1652
|
-
</svg>
|
|
1653
|
-
</button>
|
|
1654
|
-
</div>
|
|
1655
|
-
<div tabindex="0" class="py-2 dropdown-content">
|
|
1656
|
-
<div
|
|
1657
|
-
class="shadow-xl w-72 card compact bg-neutral-focus text-neutral-content rounded-box"
|
|
1658
|
-
>
|
|
1659
|
-
<div class="card-body">
|
|
1660
|
-
<h2 class="font-extrabold capitalize card-title">
|
|
1661
|
-
button component
|
|
1662
|
-
</h2>
|
|
1663
|
-
<p class="text-sm text-neutral-content text-opacity-80">
|
|
1664
|
-
Buttons come in various shapes, colors and sizes
|
|
1665
|
-
</p>
|
|
1666
|
-
<div class="flex justify-end mt-4">
|
|
1667
|
-
<a
|
|
1668
|
-
target="blank"
|
|
1669
|
-
href="https://daisyui.com/components/button"
|
|
1670
|
-
class="btn btn-primary btn-sm xl:btn-md"
|
|
1671
|
-
>
|
|
1672
|
-
See component
|
|
1673
|
-
</a>
|
|
1674
|
-
</div>
|
|
1675
|
-
</div>
|
|
1676
|
-
</div>
|
|
1677
|
-
</div>
|
|
1678
|
-
</div>
|
|
1679
|
-
</div>
|
|
1680
|
-
</div>
|
|
1681
|
-
</div>
|
|
1682
|
-
</div>
|
|
1683
|
-
</div>
|
|
1684
|
-
</template>
|