nk_jtb 0.17.0 → 0.18.0
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/index.html +509 -689
- package/package.json +1 -1
- package/readme.md +62 -52
- package/resolvers.md +50 -0
- package/src/_random-for-review.scss +4 -12
- package/src/build.scss +21 -29
- package/src/common-tools.scss +0 -1
- package/{tmp427 → src/extras}/_hero.scss +2 -2
- package/src/forms/_control.scss +12 -14
- package/src/functions/_helpers.scss +7 -0
- package/src/functions/_map-and-list-helpers.scss +75 -67
- package/src/functions/_strings.scss +27 -4
- package/src/maps_and_variables/_base.scss +0 -3
- package/src/maps_and_variables/_colors.scss +563 -29
- package/src/maps_and_variables/_config.scss +17 -15
- package/src/maps_and_variables/_position-maps.scss +6 -7
- package/src/maps_and_variables/_property-maps.scss +44 -0
- package/src/maps_and_variables/_utility-maps.scss +0 -17
- package/src/maps_and_variables/_values-variants-and-properties.scss +0 -7
- package/src/maps_and_variables/index.scss +0 -1
- package/src/mixins/_build-classes.scss +112 -67
- package/src/mixins/_helpers.scss +81 -0
- package/src/mixins/{_class-makers.scss → _make-classes.scss} +102 -20
- package/src/mixins/_resolvers.scss +0 -0
- package/src/play.scss +52 -16
- package/src/utilities/_alignment.scss +6 -31
- package/src/utilities/_backgrounds.scss +13 -14
- package/src/utilities/_border.scss +18 -48
- package/src/utilities/_color.scss +27 -0
- package/src/utilities/_display-visibility.scss +3 -3
- package/src/utilities/_grid.scss +1 -1
- package/src/utilities/_layout.scss +1 -1
- package/src/utilities/_spacing.scss +25 -0
- package/src/utilities/_themes.scss +94 -0
- package/src/utilities/_typography.scss +11 -22
- package/tmp427/_utils-to-add.scss +31 -1
- package/src/color/_themes.scss +0 -70
- package/src/functions/_list-helpers.scss +0 -46
- package/src/maps_and_variables/_tailwind-colors.scss +0 -288
- package/src/utilities/_margin.scss +0 -44
- package/src/utilities/_padding.scss +0 -17
- package/src/utilities/index.scss +0 -18
package/index.html
CHANGED
|
@@ -3,16 +3,512 @@
|
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
|
-
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
7
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
9
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
|
10
|
-
<!-- <script src="https://cdn.tailwindcss
|
|
10
|
+
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> -->
|
|
11
11
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
12
12
|
</head>
|
|
13
13
|
|
|
14
|
+
|
|
14
15
|
<body class="zebra c-py-5-3-2">
|
|
16
|
+
<section class="py-3">
|
|
17
|
+
<div class="container">
|
|
18
|
+
<h2 class="title txt-blue">Outline</h2>
|
|
19
|
+
<h4>Outline Widths</h4>
|
|
20
|
+
<p class="txt-red">Note: An outline style class must be applied for outlines to be visible.</p>
|
|
21
|
+
<div class="grid lg:cols-3 tac c-pxy-1">
|
|
22
|
+
<div class="outline outline-blue bdr-2 bdr-gray-200">
|
|
23
|
+
<code>outline</code><br> Default outline
|
|
24
|
+
</div>
|
|
25
|
+
<div class="outline-2 outline-blue bdr-2 bdr-gray-200">
|
|
26
|
+
<code>outline-2</code><br> 2px outline
|
|
27
|
+
</div>
|
|
28
|
+
<div class="outline-3 outline-blue bdr-2 bdr-gray-200">
|
|
29
|
+
<code>outline-3</code><br> 3px outline
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<hr>
|
|
33
|
+
<h4>Outline Styles</h4>
|
|
34
|
+
<div class="grid lg:cols-2 tac c-pxy-1">
|
|
35
|
+
<div class="outline-solid outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
36
|
+
<code class="txt-red">outline-solid</code>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="outline-dashed outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
39
|
+
<code class="txt-red">outline-dashed</code>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="outline-dotted outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
42
|
+
<code class="txt-red">outline-dotted</code>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="outline-double outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
45
|
+
<code class="txt-red">outline-double</code>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<hr>
|
|
49
|
+
<h4>Outline Offset</h4>
|
|
50
|
+
<div class="flex gap-3 tac c-pxy-1">
|
|
51
|
+
<div class="w-10 outline-offset outline-solid outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
52
|
+
<code class="txt-red">outline-offset</code>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="w-10 outline-offset-3 outline-solid outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
55
|
+
<code class="txt-red">outline-offset-3</code>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="w-10 outline-offset-5 outline-solid outline-3 outline-blue bdr-2 bdr-gray-200 bdr-2 bdr-gray-200 bdr-2 bdr-gray-200">
|
|
58
|
+
<code class="txt-red">outline-offset-5</code>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
</div>
|
|
62
|
+
<hr>
|
|
63
|
+
|
|
64
|
+
</div>
|
|
65
|
+
</section>
|
|
66
|
+
<section class="py-3">
|
|
67
|
+
<div class="container">
|
|
68
|
+
<h2 class="title txt-blue">Borders</h2>
|
|
69
|
+
<h4>Border Widths</h4>
|
|
70
|
+
<div class="grid lg:cols-3 tac c-pxy-1">
|
|
71
|
+
<div class="bdr">
|
|
72
|
+
<code>bdr</code><br> Default border
|
|
73
|
+
</div>
|
|
74
|
+
<div class="bdr-2">
|
|
75
|
+
<code>bdr-2</code><br> 2px border
|
|
76
|
+
</div>
|
|
77
|
+
<div class="bdr-3">
|
|
78
|
+
<code>bdr-3</code><br> 3px border
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<hr>
|
|
82
|
+
<h4>Border Radius</h4>
|
|
83
|
+
<div class="grid lg:cols-4 tac c-pxy-1">
|
|
84
|
+
<div class="bdr rounded">
|
|
85
|
+
<code>rounded</code><br> Default radius
|
|
86
|
+
</div>
|
|
87
|
+
<div class="bdr-2 rounded-05">
|
|
88
|
+
<code>rounded-05</code><br> 0.5rem radius
|
|
89
|
+
</div>
|
|
90
|
+
<div class="bdr-2 rounded-1">
|
|
91
|
+
<code>rounded-1</code><br> 1rem radius
|
|
92
|
+
</div>
|
|
93
|
+
<div class="bdr-3 rounded-full">
|
|
94
|
+
<code>rounded-full</code><br> full radius
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<h4>Border Radius</h4>
|
|
98
|
+
<div class="grid lg:cols-4 tac c-pxy-1">
|
|
99
|
+
<div class="py bdr rounded-t-075">
|
|
100
|
+
<code>rounded-t</code><br>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="py bdr rounded-r-075">
|
|
103
|
+
<code>rounded-r</code><br>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="py bdr rounded-b-075">
|
|
107
|
+
<code>rounded-b</code><br>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="py bdr rounded-l-075">
|
|
110
|
+
<code>rounded-l</code><br>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="py bdr rounded-tl-075">
|
|
114
|
+
<code>rounded-tl</code><br>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="py bdr rounded-tr-075">
|
|
117
|
+
<code>rounded-tr</code><br>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="py bdr rounded-br-075">
|
|
120
|
+
<code>rounded-br</code><br>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="py bdr rounded-bl-075">
|
|
123
|
+
<code>rounded-bl</code><br>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<hr>
|
|
127
|
+
<h4>Border Styles</h4>
|
|
128
|
+
<div class="grid lg:cols-2 tac c-pxy-1">
|
|
129
|
+
<div class="bdr-3 bdr-solid">
|
|
130
|
+
<code class="txt-red">bdr-solid</code>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="bdr-3 bdr-dashed">
|
|
133
|
+
<code class="txt-red">bdr-dashed</code>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="bdr-3 bdr-dotted">
|
|
136
|
+
<code class="txt-red">bdr-dotted</code>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="bdr-3 bdr-double">
|
|
139
|
+
<code class="txt-red">bdr-double</code>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<hr>
|
|
143
|
+
<h4>Border Sides</h4>
|
|
144
|
+
<div class="grid gap-3 lg:cols-4 tac c-pxy-1">
|
|
145
|
+
<div class="bdr-t-4"> bdr-t-4 </div>
|
|
146
|
+
<div class="bdr-r-4"> bdr-r-4 </div>
|
|
147
|
+
<div class="bdr-b-4"> bdr-b-4 </div>
|
|
148
|
+
<div class="bdr-l-4"> bdr-l-4 </div>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<h4>Border Horizontal and Vertical Sides</h4>
|
|
152
|
+
<div class="grid gap-3 lg:cols-4 tac c-pxy-1">
|
|
153
|
+
<div class="bdr-x-4"> bdr-4 </div>
|
|
154
|
+
<div class="bdr-y-4"> bdr-4 </div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</section>
|
|
158
|
+
|
|
159
|
+
<section id="colors" class="py-3">
|
|
160
|
+
<div class="container-xl">
|
|
161
|
+
<h2 class="title">Colors</h2>
|
|
162
|
+
<p>This compares the tailwind <code>-500</code> color to the colors in the <code>base-colors</code></p>
|
|
163
|
+
<!-- tailwind -500 vs base color comparison -->
|
|
164
|
+
<div class="grid md:cols-6 font-mono tac">
|
|
165
|
+
<div class="bdr">
|
|
166
|
+
<div class="py-1 bg-red-500">red-500</div>
|
|
167
|
+
<div class="py-1 bg-red">red</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="bdr">
|
|
170
|
+
<div class="py-1 bg-orange-500">orange-500</div>
|
|
171
|
+
<div class="py-1 bg-orange">orange</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="bdr">
|
|
174
|
+
<div class="py-1 bg-amber-500">amber-500</div>
|
|
175
|
+
<div class="py-1 bg-amber">amber</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="bdr">
|
|
178
|
+
<div class="py-1 bg-yellow-500">yellow-500</div>
|
|
179
|
+
<div class="py-1 bg-yellow">yellow</div>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="bdr">
|
|
182
|
+
<div class="py-1 bg-lime-500">lime-500</div>
|
|
183
|
+
<div class="py-1 bg-lime">lime</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="bdr">
|
|
186
|
+
<div class="py-1 bg-green-500">green-500</div>
|
|
187
|
+
<div class="py-1 bg-green">green</div>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="bdr">
|
|
190
|
+
<div class="py-1 bg-emerald-500">emerald-500</div>
|
|
191
|
+
<div class="py-1 bg-emerald">emerald</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="bdr">
|
|
194
|
+
<div class="py-1 bg-teal-500">teal-500</div>
|
|
195
|
+
<div class="py-1 bg-teal">teal</div>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="bdr">
|
|
198
|
+
<div class="py-1 bg-cyan-500">cyan-500</div>
|
|
199
|
+
<div class="py-1 bg-cyan">cyan</div>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="bdr">
|
|
202
|
+
<div class="py-1 bg-sky-500">sky-500</div>
|
|
203
|
+
<div class="py-1 bg-sky">sky</div>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="bdr">
|
|
206
|
+
<div class="py-1 bg-blue-500">blue-500</div>
|
|
207
|
+
<div class="py-1 bg-blue">blue</div>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="bdr">
|
|
210
|
+
<div class="py-1 bg-indigo-500">indigo-500</div>
|
|
211
|
+
<div class="py-1 bg-indigo">indigo</div>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="bdr">
|
|
214
|
+
<div class="py-1 bg-violet-500">violet-500</div>
|
|
215
|
+
<div class="py-1 bg-violet">violet</div>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="bdr">
|
|
218
|
+
<div class="py-1 bg-purple-500">purple-500</div>
|
|
219
|
+
<div class="py-1 bg-purple">purple</div>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="bdr">
|
|
222
|
+
<div class="py-1 bg-fuchsia-500">fuchsia-500</div>
|
|
223
|
+
<div class="py-1 bg-fuchsia">fuchsia</div>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="bdr">
|
|
226
|
+
<div class="py-1 bg-pink-500">pink-500</div>
|
|
227
|
+
<div class="py-1 bg-pink">pink</div>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="bdr">
|
|
230
|
+
<div class="py-1 bg-rose-500">rose-500</div>
|
|
231
|
+
<div class="py-1 bg-rose">rose</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="bdr">
|
|
234
|
+
<div class="py-1 bg-slate-500">slate-500</div>
|
|
235
|
+
<div class="py-1 bg-slate">slate</div>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="bdr">
|
|
238
|
+
<div class="py-1 bg-gray-500">gray-500</div>
|
|
239
|
+
<div class="py-1 bg-gray">gray</div>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="bdr">
|
|
242
|
+
<div class="py-1 bg-zinc-500">zinc-500</div>
|
|
243
|
+
<div class="py-1 bg-zinc">zinc</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="bdr">
|
|
246
|
+
<div class="py-1 bg-neutral-500">neutral-500</div>
|
|
247
|
+
<div class="py-1 bg-neutral">neutral</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="bdr">
|
|
250
|
+
<div class="py-1 bg-stone-500">stone-500</div>
|
|
251
|
+
<div class="py-1 bg-stone">stone</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<hr>
|
|
255
|
+
<!-- text base colors demo -->
|
|
256
|
+
<div class="flex txt-xl space-between">
|
|
257
|
+
<p class="txt-xl txt-red">red</p>
|
|
258
|
+
<p class="txt-xl txt-orange">orange</p>
|
|
259
|
+
<p class="txt-xl txt-amber">amber</p>
|
|
260
|
+
<p class="txt-xl txt-yellow">yellow</p>
|
|
261
|
+
<p class="txt-xl txt-lime">lime</p>
|
|
262
|
+
<p class="txt-xl txt-green">green</p>
|
|
263
|
+
<p class="txt-xl txt-emerald">emerald</p>
|
|
264
|
+
<p class="txt-xl txt-teal">teal</p>
|
|
265
|
+
<p class="txt-xl txt-cyan">cyan</p>
|
|
266
|
+
<p class="txt-xl txt-sky">sky</p>
|
|
267
|
+
<p class="txt-xl txt-blue">blue</p>
|
|
268
|
+
<p class="txt-xl txt-indigo">indigo</p>
|
|
269
|
+
<p class="txt-xl txt-violet">violet</p>
|
|
270
|
+
<p class="txt-xl txt-purple">purple</p>
|
|
271
|
+
<p class="txt-xl txt-fuchsia">fuchsia</p>
|
|
272
|
+
<p class="txt-xl txt-pink">pink</p>
|
|
273
|
+
<p class="txt-xl txt-rose">rose</p>
|
|
274
|
+
<p class="txt-xl txt-slate">slate</p>
|
|
275
|
+
<p class="txt-xl txt-gray">gray</p>
|
|
276
|
+
<p class="txt-xl txt-zinc">zinc</p>
|
|
277
|
+
<p class="txt-xl txt-neutral">neutral</p>
|
|
278
|
+
<p class="txt-xl txt-stone">stone</p>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</section>
|
|
282
|
+
<section>
|
|
283
|
+
<div class="container">
|
|
284
|
+
<h2>Positional Utilities</h2>
|
|
285
|
+
<div class="flex gap justify-between items-start">
|
|
286
|
+
<div class="bg-stripes-pink rounded">
|
|
287
|
+
<div class="bx bg-pink-100 pxy mxy-1"><code>pxy</code></div>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="bg-stripes-pink rounded">
|
|
290
|
+
<div class="bx bg-pink-100 pxy-2 mxy-1"><code>pxy-2</code></div>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
293
|
+
<div class="bx lh-1 mxy"><code>mxy</code></div>
|
|
294
|
+
</div>
|
|
295
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
296
|
+
<div class="bx lh-1 mxy-2"><code>mxy-2</code></div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="flex gap justify-between items-start">
|
|
15
300
|
|
|
301
|
+
<div class="bg-stripes-pink rounded">
|
|
302
|
+
<div class="bx bg-pink-100 pxy-3 mxy-1"><code>pxy-3</code></div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
306
|
+
<div class="bx lh-1 mxy-3"><code>mxy-3</code></div>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
<div class="flex gap justify-between items-start">
|
|
310
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
311
|
+
<div class="bx lh-1 mx"><code>mx</code></div>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
314
|
+
<div class="bx lh-1 my"><code>my</code></div>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
317
|
+
<div class="bx lh-1 mt"><code>mt</code></div>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
320
|
+
<div class="bx lh-1 mb"><code>mb</code></div>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
323
|
+
<div class="bx lh-1 ml"><code>ml</code></div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
326
|
+
<div class="bx lh-1 mr"><code>mr</code></div>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
</div>
|
|
332
|
+
</section>
|
|
333
|
+
<section>
|
|
334
|
+
<div class="container">
|
|
335
|
+
<h2>Positional Utilities</h2>
|
|
336
|
+
<div class="flex gap justify-between items-start">
|
|
337
|
+
<div class="bg-stripes-pink rounded">
|
|
338
|
+
<div class="bx bg-pink-100 pxy mxy-1"><code>pxy</code></div>
|
|
339
|
+
</div>
|
|
340
|
+
<div class="bg-stripes-pink rounded">
|
|
341
|
+
<div class="bx bg-pink-100 pxy-2 mxy-1"><code>pxy-2</code></div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="bg-stripes-pink rounded">
|
|
344
|
+
<div class="bx bg-pink-100 pxy-3 mxy-1"><code>pxy-3</code></div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="flex gap justify-between items-start">
|
|
348
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
349
|
+
<div class="bx lh-1 mxy"><code>mxy</code></div>
|
|
350
|
+
</div>
|
|
351
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
352
|
+
<div class="bx lh-1 mxy-2"><code>mxy-2</code></div>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
355
|
+
<div class="bx lh-1 mxy-3"><code>mxy-3</code></div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="flex gap justify-between items-start">
|
|
359
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
360
|
+
<div class="bx lh-1 mx"><code>mx</code></div>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
363
|
+
<div class="bx lh-1 my"><code>my</code></div>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
366
|
+
<div class="bx lh-1 mt"><code>mt</code></div>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
369
|
+
<div class="bx lh-1 mb"><code>mb</code></div>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
372
|
+
<div class="bx lh-1 ml"><code>ml</code></div>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
375
|
+
<div class="bx lh-1 mr"><code>mr</code></div>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
</div>
|
|
379
|
+
<div class="flex gap justify-between items-start">
|
|
380
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
381
|
+
<div class="bx lh-1 my"><code>my</code></div>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
384
|
+
<div class="bx lh-1 my-2"><code>my-2</code></div>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="bg-stripes-blue bdr-blue">
|
|
387
|
+
<div class="bx lh-1 my-3"><code>my-3</code></div>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</section>
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
<div class="container-sm py-5">
|
|
395
|
+
|
|
396
|
+
<div class="bx space-y">
|
|
397
|
+
<div class="pxy-1 outline-solid"><code>outline-solid</code></div>
|
|
398
|
+
<div class="outline-solid outline-width-1 outline-red-500"><code>outline-solid outline-width-1 outline-red-500</code></div>
|
|
399
|
+
<div class="outline-solid outline-width-2 outline-red-500"><code>outline-solid outline-width-2 outline-red-500</code></div>
|
|
400
|
+
<div class="outline-solid outline-width-3 outline-red-500"><code>outline-solid outline-width-3 outline-red-500</code></div>
|
|
401
|
+
<div class="outline-solid outline-width-4 outline-red-500"><code>outline-solid outline-width-4 outline-red-500</code></div>
|
|
402
|
+
<div class="outline-solid outline-width-5 outline-red-500"><code>outline-solid outline-width-5 outline-red-500</code></div>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
|
|
406
|
+
<div class="x px-075 py-05 txt-white txt-sm font-medium cursor-pointer rounded-lg
|
|
407
|
+
bg-pink-700
|
|
408
|
+
ring-4 ring-yellow ">Pink</div>
|
|
409
|
+
<hr>
|
|
410
|
+
|
|
411
|
+
<div class="px-075 py-05 txt-white txt-sm font-medium cursor-pointer rounded-lg
|
|
412
|
+
bg-pink-700 hover:bg-pink-800
|
|
413
|
+
focus:ring-4 focus:ring-pink-300 ">Pink</div>
|
|
414
|
+
|
|
415
|
+
<!-- <button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">
|
|
416
|
+
Save changes
|
|
417
|
+
</button> -->
|
|
418
|
+
|
|
419
|
+
<button class="px-075 py-05 txt-white txt-sm font-medium cursor-pointer rounded-lg
|
|
420
|
+
bg-pink-700 hover:bg-pink-800
|
|
421
|
+
focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-900" type="button">Pink</button>
|
|
422
|
+
|
|
423
|
+
<!-- bdr 0 bdr-2 -->
|
|
424
|
+
<button class="px-075 py-05 txt-white txt-sm font-medium cursor-pointer rounded-lg
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
focus:outline-none
|
|
429
|
+
bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
|
430
|
+
type="button">Purple</button>
|
|
431
|
+
|
|
432
|
+
<button class="px-075 py-05 txt-white txt-sm font-medium cursor-pointer rounded-lg
|
|
433
|
+
bdr bdr-blue-500 bdr-2
|
|
434
|
+
bg-blue-700 hover:bg-blue-800
|
|
435
|
+
active:bg-orange-500"
|
|
436
|
+
type="button">BUTTON</button>
|
|
437
|
+
|
|
438
|
+
|
|
439
|
+
<div class="px-075 py-05 cursor-pointer rounded
|
|
440
|
+
txt-white txt-sm font-medium
|
|
441
|
+
bdr bdr-blue-500 bdr-2
|
|
442
|
+
bg-blue-700 hover:bg-blue-800 active:bg-orange-500">DIV</div>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
<p class="font-light">The quick brown fox ...</p>
|
|
451
|
+
<p class="font-normal">The quick brown fox ...</p>
|
|
452
|
+
<p class="font-medium">The quick brown fox ...</p>
|
|
453
|
+
<p class="font-semibold">The quick brown fox ...</p>
|
|
454
|
+
<p class="font-bold">The quick brown fox ...</p>
|
|
455
|
+
<p class="fw1">The quick brown fox ...</p>
|
|
456
|
+
<p class="fw2">The quick brown fox ...</p>
|
|
457
|
+
<p class="fw3">The quick brown fox ...</p>
|
|
458
|
+
<p class="fw4">The quick brown fox ...</p>
|
|
459
|
+
<p class="fw5">The quick brown fox ...</p>
|
|
460
|
+
<p class="fw6">The quick brown fox ...</p>
|
|
461
|
+
<p class="fw7">The quick brown fox ...</p>
|
|
462
|
+
<p class="fw8">The quick brown fox ...</p>
|
|
463
|
+
<p class="fw9">The quick brown fox ...</p>
|
|
464
|
+
<!-- basic theme examples -->
|
|
465
|
+
<section id="basic-themes" class="py-3">
|
|
466
|
+
<div class="container">
|
|
467
|
+
<h2 class="title txt-3">Basic Themes</h2>
|
|
468
|
+
<h4>Base Colors</h4>
|
|
469
|
+
<p class="txt-red"><strong>Note:</strong> The border width has been increased in these examples for better visibility.</p>
|
|
470
|
+
<div class="grid gap-05 cols-6">
|
|
471
|
+
<div class="bdr-5 primary pxy">primary</div>
|
|
472
|
+
<div class="bdr-5 secondary pxy">secondary</div>
|
|
473
|
+
<div class="bdr-5 accent pxy">accent</div>
|
|
474
|
+
<div class="bdr-5 light pxy">light</div>
|
|
475
|
+
<div class="bdr-5 dark pxy">dark</div>
|
|
476
|
+
<div class="bdr-5 danger pxy">danger</div>
|
|
477
|
+
<div class="bdr-5 info pxy">info</div>
|
|
478
|
+
<div class="bdr-5 success pxy">success</div>
|
|
479
|
+
<div class="bdr-5 warning pxy">warning</div>
|
|
480
|
+
<div class="bdr-5 muted pxy">muted</div>
|
|
481
|
+
<div class="bdr-5 stone pxy">stone</div>
|
|
482
|
+
<div class="bdr-5 brown pxy">brown</div>
|
|
483
|
+
<div class="bdr-5 red pxy">red</div>
|
|
484
|
+
<div class="bdr-5 orange pxy">orange</div>
|
|
485
|
+
<div class="bdr-5 amber pxy">amber</div>
|
|
486
|
+
<div class="bdr-5 yellow pxy">yellow</div>
|
|
487
|
+
<div class="bdr-5 lime pxy">lime</div>
|
|
488
|
+
<div class="bdr-5 emerald pxy">emerald</div>
|
|
489
|
+
<div class="bdr-5 green pxy">green</div>
|
|
490
|
+
<div class="bdr-5 teal pxy">teal</div>
|
|
491
|
+
<div class="bdr-5 cyan pxy">cyan</div>
|
|
492
|
+
<div class="bdr-5 sky pxy">sky</div>
|
|
493
|
+
<div class="bdr-5 blue pxy">blue</div>
|
|
494
|
+
<div class="bdr-5 indigo pxy">indigo</div>
|
|
495
|
+
<div class="bdr-5 purple pxy">purple</div>
|
|
496
|
+
<div class="bdr-5 fuchsia pxy">fuchsia</div>
|
|
497
|
+
<div class="bdr-5 pink pxy">pink</div>
|
|
498
|
+
<div class="bdr-5 rose pxy">rose</div>
|
|
499
|
+
<div class="bdr-5 white pxy">white</div>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
502
|
+
</section>
|
|
503
|
+
|
|
504
|
+
<div class="container-sm py-5">
|
|
505
|
+
<div class="bx bg-red-100 bdr-red-300 txt-red-800 hover:bg-blue-200 hover:bdr-blue-400 hover:txt-blue-900">
|
|
506
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
<div class="green pxy">sdf</div>
|
|
16
512
|
<section id="form-controls" class="py-3">
|
|
17
513
|
<div class="container">
|
|
18
514
|
<div class="txt-red txt-4">moved to JTB docs</div>
|
|
@@ -52,11 +548,11 @@
|
|
|
52
548
|
</div>
|
|
53
549
|
<div id="label-with-tooltip">
|
|
54
550
|
<h5 class="my">Label with Tooltip</h5>
|
|
55
|
-
<div class="flex va-c space-between mb-05 bdr">
|
|
551
|
+
<div class="flex va-c gap space-between mb-05 bdr">
|
|
56
552
|
<label> My Label </label>
|
|
57
553
|
<span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
|
|
58
554
|
x-on:mouseleave="open=false">
|
|
59
|
-
<div class="flex va-c">
|
|
555
|
+
<div class="flex va-c gap-1 fw6 mt-1">
|
|
60
556
|
<svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
61
557
|
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
62
558
|
aria-hidden="true" data-slot="icon">
|
|
@@ -301,8 +797,8 @@
|
|
|
301
797
|
<a href="/" aria-label="Home">
|
|
302
798
|
<img src="/images/logo.svg" alt="NayKel JTB logo" loading="lazy" />
|
|
303
799
|
</a>
|
|
304
|
-
<div class="bdr flex va-c space-x-3">
|
|
305
|
-
<div class="flex va-c">
|
|
800
|
+
<div class="bdr flex va-c gap space-x-3">
|
|
801
|
+
<div class="flex va-c gap-1 fw6 mt-1">
|
|
306
802
|
<nav>
|
|
307
803
|
<ul>
|
|
308
804
|
<li><a class="active" href="#">Home</a></li>
|
|
@@ -446,45 +942,7 @@
|
|
|
446
942
|
</table>
|
|
447
943
|
</div>
|
|
448
944
|
<main class="main-content-quick-hide-wrapper zebra">
|
|
449
|
-
|
|
450
|
-
<section id="basic-themes" class="py-3">
|
|
451
|
-
<div class="container">
|
|
452
|
-
<h2 class="title txt-3">Basic Themes</h2>
|
|
453
|
-
<h4>Base Colors</h4>
|
|
454
|
-
<p class="txt-red"><strong>Note:</strong> The border width has been increased in these examples for better visibility.</p>
|
|
455
|
-
<div class="grid gap-05 cols-6">
|
|
456
|
-
<div class="bdr-5 primary pxy">primary</div>
|
|
457
|
-
<div class="bdr-5 secondary pxy">secondary</div>
|
|
458
|
-
<div class="bdr-5 accent pxy">accent</div>
|
|
459
|
-
<div class="bdr-5 light pxy">light</div>
|
|
460
|
-
<div class="bdr-5 dark pxy">dark</div>
|
|
461
|
-
<div class="bdr-5 danger pxy">danger</div>
|
|
462
|
-
<div class="bdr-5 info pxy">info</div>
|
|
463
|
-
<div class="bdr-5 success pxy">success</div>
|
|
464
|
-
<div class="bdr-5 warning pxy">warning</div>
|
|
465
|
-
<div class="bdr-5 muted pxy">muted</div>
|
|
466
|
-
<div class="bdr-5 stone pxy">stone</div>
|
|
467
|
-
<div class="bdr-5 brown pxy">brown</div>
|
|
468
|
-
<div class="bdr-5 red pxy">red</div>
|
|
469
|
-
<div class="bdr-5 orange pxy">orange</div>
|
|
470
|
-
<div class="bdr-5 amber pxy">amber</div>
|
|
471
|
-
<div class="bdr-5 yellow pxy">yellow</div>
|
|
472
|
-
<div class="bdr-5 lime pxy">lime</div>
|
|
473
|
-
<div class="bdr-5 emerald pxy">emerald</div>
|
|
474
|
-
<div class="bdr-5 green pxy">green</div>
|
|
475
|
-
<div class="bdr-5 teal pxy">teal</div>
|
|
476
|
-
<div class="bdr-5 cyan pxy">cyan</div>
|
|
477
|
-
<div class="bdr-5 sky pxy">sky</div>
|
|
478
|
-
<div class="bdr-5 blue pxy">blue</div>
|
|
479
|
-
<div class="bdr-5 indigo pxy">indigo</div>
|
|
480
|
-
<div class="bdr-5 purple pxy">purple</div>
|
|
481
|
-
<div class="bdr-5 fuchsia pxy">fuchsia</div>
|
|
482
|
-
<div class="bdr-5 pink pxy">pink</div>
|
|
483
|
-
<div class="bdr-5 rose pxy">rose</div>
|
|
484
|
-
<div class="bdr-5 white pxy">white</div>
|
|
485
|
-
</div>
|
|
486
|
-
</div>
|
|
487
|
-
</section>
|
|
945
|
+
|
|
488
946
|
<!-- table and components -->
|
|
489
947
|
<section id="table" class="py-3">
|
|
490
948
|
<div class="container">
|
|
@@ -970,13 +1428,13 @@
|
|
|
970
1428
|
adipisci sunt ad voluptatem quam. </p>
|
|
971
1429
|
</div>
|
|
972
1430
|
<button x-on:click="expanded =! expanded" class="link mt">
|
|
973
|
-
<div class="flex va-c" x-show="!expanded">
|
|
1431
|
+
<div class="flex va-c" ap x-show="!expanded">
|
|
974
1432
|
Show more
|
|
975
1433
|
<svg class="icon sm ml-05">
|
|
976
1434
|
<use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
|
|
977
1435
|
</svg>
|
|
978
1436
|
</div>
|
|
979
|
-
<span class="flex va-c" x-show="expanded">
|
|
1437
|
+
<span class="flex va-c" ap x-show="expanded">
|
|
980
1438
|
Show less
|
|
981
1439
|
<svg class="icon sm ml-05">
|
|
982
1440
|
<use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
|
|
@@ -1228,7 +1686,7 @@
|
|
|
1228
1686
|
<section id="notifications" class="py-3">
|
|
1229
1687
|
<div class="container">
|
|
1230
1688
|
<div class="grid cols-3">
|
|
1231
|
-
<div class="bx pxy-1 flex va-c">
|
|
1689
|
+
<div class="bx pxy-1 flex va-c" ap>
|
|
1232
1690
|
<svg class="txt-green wh-2">
|
|
1233
1691
|
<use xlink:href="svg/naykel-ui.svg#check-circle"></use>
|
|
1234
1692
|
</svg>
|
|
@@ -1246,12 +1704,12 @@
|
|
|
1246
1704
|
<div class="container">
|
|
1247
1705
|
<h2>Alignment Techniques</h2>
|
|
1248
1706
|
<div class="grid cols-3">
|
|
1249
|
-
<div class="bdr flex va-c">
|
|
1707
|
+
<div class="bdr flex va-c" ap>
|
|
1250
1708
|
<div class="wh-3 pink"></div>
|
|
1251
1709
|
<div class="wh-4 blue"></div>
|
|
1252
1710
|
<div class="ml-auto wh-3 pink"></div>
|
|
1253
1711
|
</div>
|
|
1254
|
-
<div class="bdr flex va-c">
|
|
1712
|
+
<div class="bdr flex va-c" ap>
|
|
1255
1713
|
<span class="wh-3 pink"></span>
|
|
1256
1714
|
<div class="fg1 wh-4 blue"></div>
|
|
1257
1715
|
<span class="wh-3 pink"></span>
|
|
@@ -1526,28 +1984,8 @@
|
|
|
1526
1984
|
</section>
|
|
1527
1985
|
<section id="theme-examples-with-state">
|
|
1528
1986
|
<div class="container">
|
|
1529
|
-
<h2 class="title txt-3">Themes With State</h2>
|
|
1530
1987
|
<h4>Base Colors</h4>
|
|
1531
|
-
|
|
1532
|
-
<div class="pxy bdr-3 tac withState stone">stone</div>
|
|
1533
|
-
<div class="pxy bdr-3 tac withState brown">brown</div>
|
|
1534
|
-
<div class="pxy bdr-3 tac withState red">red</div>
|
|
1535
|
-
<div class="pxy bdr-3 tac withState orange">orange</div>
|
|
1536
|
-
<div class="pxy bdr-3 tac withState amber">amber</div>
|
|
1537
|
-
<div class="pxy bdr-3 tac withState yellow">yellow</div>
|
|
1538
|
-
<div class="pxy bdr-3 tac withState lime">lime</div>
|
|
1539
|
-
<div class="pxy bdr-3 tac withState emerald">emerald</div>
|
|
1540
|
-
<div class="pxy bdr-3 tac withState green">green</div>
|
|
1541
|
-
<div class="pxy bdr-3 tac withState teal">teal</div>
|
|
1542
|
-
<div class="pxy bdr-3 tac withState cyan">cyan</div>
|
|
1543
|
-
<div class="pxy bdr-3 tac withState sky">sky</div>
|
|
1544
|
-
<div class="pxy bdr-3 tac withState blue">blue</div>
|
|
1545
|
-
<div class="pxy bdr-3 tac withState indigo">indigo</div>
|
|
1546
|
-
<div class="pxy bdr-3 tac withState purple">purple</div>
|
|
1547
|
-
<div class="pxy bdr-3 tac withState fuchsia">fuchsia</div>
|
|
1548
|
-
<div class="pxy bdr-3 tac withState pink">pink</div>
|
|
1549
|
-
<div class="pxy bdr-3 tac withState rose">rose</div>
|
|
1550
|
-
</div>
|
|
1988
|
+
|
|
1551
1989
|
<h4>Theme Colors and Alert Colors</h4>
|
|
1552
1990
|
<div class="grid cols-5">
|
|
1553
1991
|
<div class="pxy bdr-3 tac withState primary">primary</div>
|
|
@@ -1726,626 +2164,8 @@
|
|
|
1726
2164
|
</tr>
|
|
1727
2165
|
</tbody>
|
|
1728
2166
|
</table>
|
|
1729
|
-
|
|
1730
2167
|
</section>
|
|
1731
2168
|
</main>
|
|
1732
|
-
|
|
1733
|
-
<footer id="nk-footer">
|
|
1734
|
-
|
|
1735
|
-
</footer>
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
<section id="base-color-shades">
|
|
1739
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1740
|
-
<p class="tal">Stone</p>
|
|
1741
|
-
<div class="py stone-1">1</div>
|
|
1742
|
-
<div class="py stone-2">2</div>
|
|
1743
|
-
<div class="py stone-3">3</div>
|
|
1744
|
-
<div class="py stone-4">4</div>
|
|
1745
|
-
<div class="py stone-5">5</div>
|
|
1746
|
-
<div class="py stone-6">6</div>
|
|
1747
|
-
<div class="py stone-7">7</div>
|
|
1748
|
-
<div class="py stone-8">8</div>
|
|
1749
|
-
<div class="py stone-9">9</div>
|
|
1750
|
-
<div class="py stone-10">10</div>
|
|
1751
|
-
<div class="py stone-11">11</div>
|
|
1752
|
-
</div>
|
|
1753
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1754
|
-
<p class="tal">Brown</p>
|
|
1755
|
-
<div class="py brown-1">1</div>
|
|
1756
|
-
<div class="py brown-2">2</div>
|
|
1757
|
-
<div class="py brown-3">3</div>
|
|
1758
|
-
<div class="py brown-4">4</div>
|
|
1759
|
-
<div class="py brown-5">5</div>
|
|
1760
|
-
<div class="py brown-6">6</div>
|
|
1761
|
-
<div class="py brown-7">7</div>
|
|
1762
|
-
<div class="py brown-8">8</div>
|
|
1763
|
-
<div class="py brown-9">9</div>
|
|
1764
|
-
<div class="py brown-10">10</div>
|
|
1765
|
-
<div class="py brown-11">11</div>
|
|
1766
|
-
</div>
|
|
1767
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1768
|
-
<p class="tal">Red</p>
|
|
1769
|
-
<div class="py red-1">1</div>
|
|
1770
|
-
<div class="py red-2">2</div>
|
|
1771
|
-
<div class="py red-3">3</div>
|
|
1772
|
-
<div class="py red-4">4</div>
|
|
1773
|
-
<div class="py red-5">5</div>
|
|
1774
|
-
<div class="py red-6">6</div>
|
|
1775
|
-
<div class="py red-7">7</div>
|
|
1776
|
-
<div class="py red-8">8</div>
|
|
1777
|
-
<div class="py red-9">9</div>
|
|
1778
|
-
<div class="py red-10">10</div>
|
|
1779
|
-
<div class="py red-11">11</div>
|
|
1780
|
-
</div>
|
|
1781
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1782
|
-
<p class="tal">Orange</p>
|
|
1783
|
-
<div class="py orange-1">1</div>
|
|
1784
|
-
<div class="py orange-2">2</div>
|
|
1785
|
-
<div class="py orange-3">3</div>
|
|
1786
|
-
<div class="py orange-4">4</div>
|
|
1787
|
-
<div class="py orange-5">5</div>
|
|
1788
|
-
<div class="py orange-6">6</div>
|
|
1789
|
-
<div class="py orange-7">7</div>
|
|
1790
|
-
<div class="py orange-8">8</div>
|
|
1791
|
-
<div class="py orange-9">9</div>
|
|
1792
|
-
<div class="py orange-10">10</div>
|
|
1793
|
-
<div class="py orange-11">11</div>
|
|
1794
|
-
</div>
|
|
1795
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1796
|
-
<p class="tal">Amber</p>
|
|
1797
|
-
<div class="py amber-1">1</div>
|
|
1798
|
-
<div class="py amber-2">2</div>
|
|
1799
|
-
<div class="py amber-3">3</div>
|
|
1800
|
-
<div class="py amber-4">4</div>
|
|
1801
|
-
<div class="py amber-5">5</div>
|
|
1802
|
-
<div class="py amber-6">6</div>
|
|
1803
|
-
<div class="py amber-7">7</div>
|
|
1804
|
-
<div class="py amber-8">8</div>
|
|
1805
|
-
<div class="py amber-9">9</div>
|
|
1806
|
-
<div class="py amber-10">10</div>
|
|
1807
|
-
<div class="py amber-11">11</div>
|
|
1808
|
-
</div>
|
|
1809
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1810
|
-
<p class="tal">Yellow</p>
|
|
1811
|
-
<div class="py yellow-1">1</div>
|
|
1812
|
-
<div class="py yellow-2">2</div>
|
|
1813
|
-
<div class="py yellow-3">3</div>
|
|
1814
|
-
<div class="py yellow-4">4</div>
|
|
1815
|
-
<div class="py yellow-5">5</div>
|
|
1816
|
-
<div class="py yellow-6">6</div>
|
|
1817
|
-
<div class="py yellow-7">7</div>
|
|
1818
|
-
<div class="py yellow-8">8</div>
|
|
1819
|
-
<div class="py yellow-9">9</div>
|
|
1820
|
-
<div class="py yellow-10">10</div>
|
|
1821
|
-
<div class="py yellow-11">11</div>
|
|
1822
|
-
</div>
|
|
1823
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1824
|
-
<p class="tal">Lime</p>
|
|
1825
|
-
<div class="py lime-1">1</div>
|
|
1826
|
-
<div class="py lime-2">2</div>
|
|
1827
|
-
<div class="py lime-3">3</div>
|
|
1828
|
-
<div class="py lime-4">4</div>
|
|
1829
|
-
<div class="py lime-5">5</div>
|
|
1830
|
-
<div class="py lime-6">6</div>
|
|
1831
|
-
<div class="py lime-7">7</div>
|
|
1832
|
-
<div class="py lime-8">8</div>
|
|
1833
|
-
<div class="py lime-9">9</div>
|
|
1834
|
-
<div class="py lime-10">10</div>
|
|
1835
|
-
<div class="py lime-11">11</div>
|
|
1836
|
-
</div>
|
|
1837
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1838
|
-
<p class="tal">Emerald</p>
|
|
1839
|
-
<div class="py emerald-1">1</div>
|
|
1840
|
-
<div class="py emerald-2">2</div>
|
|
1841
|
-
<div class="py emerald-3">3</div>
|
|
1842
|
-
<div class="py emerald-4">4</div>
|
|
1843
|
-
<div class="py emerald-5">5</div>
|
|
1844
|
-
<div class="py emerald-6">6</div>
|
|
1845
|
-
<div class="py emerald-7">7</div>
|
|
1846
|
-
<div class="py emerald-8">8</div>
|
|
1847
|
-
<div class="py emerald-9">9</div>
|
|
1848
|
-
<div class="py emerald-10">10</div>
|
|
1849
|
-
<div class="py emerald-11">11</div>
|
|
1850
|
-
</div>
|
|
1851
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1852
|
-
<p class="tal">Green</p>
|
|
1853
|
-
<div class="py green-1">1</div>
|
|
1854
|
-
<div class="py green-2">2</div>
|
|
1855
|
-
<div class="py green-3">3</div>
|
|
1856
|
-
<div class="py green-4">4</div>
|
|
1857
|
-
<div class="py green-5">5</div>
|
|
1858
|
-
<div class="py green-6">6</div>
|
|
1859
|
-
<div class="py green-7">7</div>
|
|
1860
|
-
<div class="py green-8">8</div>
|
|
1861
|
-
<div class="py green-9">9</div>
|
|
1862
|
-
<div class="py green-10">10</div>
|
|
1863
|
-
<div class="py green-11">11</div>
|
|
1864
|
-
</div>
|
|
1865
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1866
|
-
<p class="tal">Teal</p>
|
|
1867
|
-
<div class="py teal-1">1</div>
|
|
1868
|
-
<div class="py teal-2">2</div>
|
|
1869
|
-
<div class="py teal-3">3</div>
|
|
1870
|
-
<div class="py teal-4">4</div>
|
|
1871
|
-
<div class="py teal-5">5</div>
|
|
1872
|
-
<div class="py teal-6">6</div>
|
|
1873
|
-
<div class="py teal-7">7</div>
|
|
1874
|
-
<div class="py teal-8">8</div>
|
|
1875
|
-
<div class="py teal-9">9</div>
|
|
1876
|
-
<div class="py teal-10">10</div>
|
|
1877
|
-
<div class="py teal-11">11</div>
|
|
1878
|
-
</div>
|
|
1879
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1880
|
-
<p class="tal">Cyan</p>
|
|
1881
|
-
<div class="py cyan-1">1</div>
|
|
1882
|
-
<div class="py cyan-2">2</div>
|
|
1883
|
-
<div class="py cyan-3">3</div>
|
|
1884
|
-
<div class="py cyan-4">4</div>
|
|
1885
|
-
<div class="py cyan-5">5</div>
|
|
1886
|
-
<div class="py cyan-6">6</div>
|
|
1887
|
-
<div class="py cyan-7">7</div>
|
|
1888
|
-
<div class="py cyan-8">8</div>
|
|
1889
|
-
<div class="py cyan-9">9</div>
|
|
1890
|
-
<div class="py cyan-10">10</div>
|
|
1891
|
-
<div class="py cyan-11">11</div>
|
|
1892
|
-
</div>
|
|
1893
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1894
|
-
<p class="tal">Sky</p>
|
|
1895
|
-
<div class="py sky-1">1</div>
|
|
1896
|
-
<div class="py sky-2">2</div>
|
|
1897
|
-
<div class="py sky-3">3</div>
|
|
1898
|
-
<div class="py sky-4">4</div>
|
|
1899
|
-
<div class="py sky-5">5</div>
|
|
1900
|
-
<div class="py sky-6">6</div>
|
|
1901
|
-
<div class="py sky-7">7</div>
|
|
1902
|
-
<div class="py sky-8">8</div>
|
|
1903
|
-
<div class="py sky-9">9</div>
|
|
1904
|
-
<div class="py sky-10">10</div>
|
|
1905
|
-
<div class="py sky-11">11</div>
|
|
1906
|
-
</div>
|
|
1907
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1908
|
-
<p class="tal">Blue</p>
|
|
1909
|
-
<div class="py blue-1">1</div>
|
|
1910
|
-
<div class="py blue-2">2</div>
|
|
1911
|
-
<div class="py blue-3">3</div>
|
|
1912
|
-
<div class="py blue-4">4</div>
|
|
1913
|
-
<div class="py blue-5">5</div>
|
|
1914
|
-
<div class="py blue-6">6</div>
|
|
1915
|
-
<div class="py blue-7">7</div>
|
|
1916
|
-
<div class="py blue-8">8</div>
|
|
1917
|
-
<div class="py blue-9">9</div>
|
|
1918
|
-
<div class="py blue-10">10</div>
|
|
1919
|
-
<div class="py blue-11">11</div>
|
|
1920
|
-
</div>
|
|
1921
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1922
|
-
<p class="tal">Indigo</p>
|
|
1923
|
-
<div class="py indigo-1">1</div>
|
|
1924
|
-
<div class="py indigo-2">2</div>
|
|
1925
|
-
<div class="py indigo-3">3</div>
|
|
1926
|
-
<div class="py indigo-4">4</div>
|
|
1927
|
-
<div class="py indigo-5">5</div>
|
|
1928
|
-
<div class="py indigo-6">6</div>
|
|
1929
|
-
<div class="py indigo-7">7</div>
|
|
1930
|
-
<div class="py indigo-8">8</div>
|
|
1931
|
-
<div class="py indigo-9">9</div>
|
|
1932
|
-
<div class="py indigo-10">10</div>
|
|
1933
|
-
<div class="py indigo-11">11</div>
|
|
1934
|
-
</div>
|
|
1935
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1936
|
-
<p class="tal">Purple</p>
|
|
1937
|
-
<div class="py purple-1">1</div>
|
|
1938
|
-
<div class="py purple-2">2</div>
|
|
1939
|
-
<div class="py purple-3">3</div>
|
|
1940
|
-
<div class="py purple-4">4</div>
|
|
1941
|
-
<div class="py purple-5">5</div>
|
|
1942
|
-
<div class="py purple-6">6</div>
|
|
1943
|
-
<div class="py purple-7">7</div>
|
|
1944
|
-
<div class="py purple-8">8</div>
|
|
1945
|
-
<div class="py purple-9">9</div>
|
|
1946
|
-
<div class="py purple-10">10</div>
|
|
1947
|
-
<div class="py purple-11">11</div>
|
|
1948
|
-
</div>
|
|
1949
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1950
|
-
<p class="tal">Fuchsia</p>
|
|
1951
|
-
<div class="py fuchsia-1">1</div>
|
|
1952
|
-
<div class="py fuchsia-2">2</div>
|
|
1953
|
-
<div class="py fuchsia-3">3</div>
|
|
1954
|
-
<div class="py fuchsia-4">4</div>
|
|
1955
|
-
<div class="py fuchsia-5">5</div>
|
|
1956
|
-
<div class="py fuchsia-6">6</div>
|
|
1957
|
-
<div class="py fuchsia-7">7</div>
|
|
1958
|
-
<div class="py fuchsia-8">8</div>
|
|
1959
|
-
<div class="py fuchsia-9">9</div>
|
|
1960
|
-
<div class="py fuchsia-10">10</div>
|
|
1961
|
-
<div class="py fuchsia-11">11</div>
|
|
1962
|
-
</div>
|
|
1963
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1964
|
-
<p class="tal">Pink</p>
|
|
1965
|
-
<div class="py pink-1">1</div>
|
|
1966
|
-
<div class="py pink-2">2</div>
|
|
1967
|
-
<div class="py pink-3">3</div>
|
|
1968
|
-
<div class="py pink-4">4</div>
|
|
1969
|
-
<div class="py pink-5">5</div>
|
|
1970
|
-
<div class="py pink-6">6</div>
|
|
1971
|
-
<div class="py pink-7">7</div>
|
|
1972
|
-
<div class="py pink-8">8</div>
|
|
1973
|
-
<div class="py pink-9">9</div>
|
|
1974
|
-
<div class="py pink-10">10</div>
|
|
1975
|
-
<div class="py pink-11">11</div>
|
|
1976
|
-
</div>
|
|
1977
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1978
|
-
<p class="tal">Rose</p>
|
|
1979
|
-
<div class="py rose-1">1</div>
|
|
1980
|
-
<div class="py rose-2">2</div>
|
|
1981
|
-
<div class="py rose-3">3</div>
|
|
1982
|
-
<div class="py rose-4">4</div>
|
|
1983
|
-
<div class="py rose-5">5</div>
|
|
1984
|
-
<div class="py rose-6">6</div>
|
|
1985
|
-
<div class="py rose-7">7</div>
|
|
1986
|
-
<div class="py rose-8">8</div>
|
|
1987
|
-
<div class="py rose-9">9</div>
|
|
1988
|
-
<div class="py rose-10">10</div>
|
|
1989
|
-
<div class="py rose-11">11</div>
|
|
1990
|
-
</div>
|
|
1991
|
-
</section>
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
<section id="tailwind-colors">
|
|
1995
|
-
<div>
|
|
1996
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
1997
|
-
<p class="tal">Slate</p>
|
|
1998
|
-
<div class="h-4 bg-slate-50 tac">50</div>
|
|
1999
|
-
<div class="h-4 bg-slate-100">100</div>
|
|
2000
|
-
<div class="h-4 bg-slate-200">200</div>
|
|
2001
|
-
<div class="h-4 bg-slate-300">300</div>
|
|
2002
|
-
<div class="h-4 bg-slate-400">400</div>
|
|
2003
|
-
<div class="h-4 bg-slate-500">500</div>
|
|
2004
|
-
<div class="h-4 bg-slate-600">600</div>
|
|
2005
|
-
<div class="h-4 bg-slate-700">700</div>
|
|
2006
|
-
<div class="h-4 bg-slate-800">800</div>
|
|
2007
|
-
<div class="h-4 bg-slate-900">900</div>
|
|
2008
|
-
<div class="h-4 bg-slate-950">950</div>
|
|
2009
|
-
</div>
|
|
2010
|
-
</div>
|
|
2011
|
-
<div>
|
|
2012
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2013
|
-
<p class="tal">Gray</p>
|
|
2014
|
-
<div class="h-4 bg-gray-50">50</div>
|
|
2015
|
-
<div class="h-4 bg-gray-100">100</div>
|
|
2016
|
-
<div class="h-4 bg-gray-200">200</div>
|
|
2017
|
-
<div class="h-4 bg-gray-300">300</div>
|
|
2018
|
-
<div class="h-4 bg-gray-400">400</div>
|
|
2019
|
-
<div class="h-4 bg-gray-500">500</div>
|
|
2020
|
-
<div class="h-4 bg-gray-600">600</div>
|
|
2021
|
-
<div class="h-4 bg-gray-700">700</div>
|
|
2022
|
-
<div class="h-4 bg-gray-800">800</div>
|
|
2023
|
-
<div class="h-4 bg-gray-900">900</div>
|
|
2024
|
-
<div class="h-4 bg-gray-950">950</div>
|
|
2025
|
-
</div>
|
|
2026
|
-
</div>
|
|
2027
|
-
<div>
|
|
2028
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2029
|
-
<p class="tal">Zinc</p>
|
|
2030
|
-
<div class="h-4 bg-zinc-50">50</div>
|
|
2031
|
-
<div class="h-4 bg-zinc-100">100</div>
|
|
2032
|
-
<div class="h-4 bg-zinc-200">200</div>
|
|
2033
|
-
<div class="h-4 bg-zinc-300">300</div>
|
|
2034
|
-
<div class="h-4 bg-zinc-400">400</div>
|
|
2035
|
-
<div class="h-4 bg-zinc-500">500</div>
|
|
2036
|
-
<div class="h-4 bg-zinc-600">600</div>
|
|
2037
|
-
<div class="h-4 bg-zinc-700">700</div>
|
|
2038
|
-
<div class="h-4 bg-zinc-800">800</div>
|
|
2039
|
-
<div class="h-4 bg-zinc-900">900</div>
|
|
2040
|
-
<div class="h-4 bg-zinc-950">950</div>
|
|
2041
|
-
</div>
|
|
2042
|
-
</div>
|
|
2043
|
-
<div>
|
|
2044
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2045
|
-
<p class="tal">Neutral</p>
|
|
2046
|
-
<div class="h-4 bg-neutral-50">50</div>
|
|
2047
|
-
<div class="h-4 bg-neutral-100">100</div>
|
|
2048
|
-
<div class="h-4 bg-neutral-200">200</div>
|
|
2049
|
-
<div class="h-4 bg-neutral-300">300</div>
|
|
2050
|
-
<div class="h-4 bg-neutral-400">400</div>
|
|
2051
|
-
<div class="h-4 bg-neutral-500">500</div>
|
|
2052
|
-
<div class="h-4 bg-neutral-600">600</div>
|
|
2053
|
-
<div class="h-4 bg-neutral-700">700</div>
|
|
2054
|
-
<div class="h-4 bg-neutral-800">800</div>
|
|
2055
|
-
<div class="h-4 bg-neutral-900">900</div>
|
|
2056
|
-
<div class="h-4 bg-neutral-950">950</div>
|
|
2057
|
-
</div>
|
|
2058
|
-
</div>
|
|
2059
|
-
<div>
|
|
2060
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2061
|
-
<p class="tal">Stone</p>
|
|
2062
|
-
<div class="h-4 bg-stone-50">50</div>
|
|
2063
|
-
<div class="h-4 bg-stone-100">100</div>
|
|
2064
|
-
<div class="h-4 bg-stone-200">200</div>
|
|
2065
|
-
<div class="h-4 bg-stone-300">300</div>
|
|
2066
|
-
<div class="h-4 bg-stone-400">400</div>
|
|
2067
|
-
<div class="h-4 bg-stone-500">500</div>
|
|
2068
|
-
<div class="h-4 bg-stone-600">600</div>
|
|
2069
|
-
<div class="h-4 bg-stone-700">700</div>
|
|
2070
|
-
<div class="h-4 bg-stone-800">800</div>
|
|
2071
|
-
<div class="h-4 bg-stone-900">900</div>
|
|
2072
|
-
<div class="h-4 bg-stone-950">950</div>
|
|
2073
|
-
</div>
|
|
2074
|
-
</div>
|
|
2075
|
-
<div>
|
|
2076
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2077
|
-
<p class="tal">Red</p>
|
|
2078
|
-
<div class="h-4 bg-red-50">50</div>
|
|
2079
|
-
<div class="h-4 bg-red-100">100</div>
|
|
2080
|
-
<div class="h-4 bg-red-200">200</div>
|
|
2081
|
-
<div class="h-4 bg-red-300">300</div>
|
|
2082
|
-
<div class="h-4 bg-red-400">400</div>
|
|
2083
|
-
<div class="h-4 bg-red-500">500</div>
|
|
2084
|
-
<div class="h-4 bg-red-600">600</div>
|
|
2085
|
-
<div class="h-4 bg-red-700">700</div>
|
|
2086
|
-
<div class="h-4 bg-red-800">800</div>
|
|
2087
|
-
<div class="h-4 bg-red-900">900</div>
|
|
2088
|
-
<div class="h-4 bg-red-950">950</div>
|
|
2089
|
-
</div>
|
|
2090
|
-
</div>
|
|
2091
|
-
<div>
|
|
2092
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2093
|
-
<p class="tal">Orange</p>
|
|
2094
|
-
<div class="h-4 bg-orange-50">50</div>
|
|
2095
|
-
<div class="h-4 bg-orange-100">100</div>
|
|
2096
|
-
<div class="h-4 bg-orange-200">200</div>
|
|
2097
|
-
<div class="h-4 bg-orange-300">300</div>
|
|
2098
|
-
<div class="h-4 bg-orange-400">400</div>
|
|
2099
|
-
<div class="h-4 bg-orange-500">500</div>
|
|
2100
|
-
<div class="h-4 bg-orange-600">600</div>
|
|
2101
|
-
<div class="h-4 bg-orange-700">700</div>
|
|
2102
|
-
<div class="h-4 bg-orange-800">800</div>
|
|
2103
|
-
<div class="h-4 bg-orange-900">900</div>
|
|
2104
|
-
<div class="h-4 bg-orange-950">950</div>
|
|
2105
|
-
</div>
|
|
2106
|
-
</div>
|
|
2107
|
-
<div>
|
|
2108
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2109
|
-
<p class="tal">Amber</p>
|
|
2110
|
-
<div class="h-4 bg-amber-50">50</div>
|
|
2111
|
-
<div class="h-4 bg-amber-100">100</div>
|
|
2112
|
-
<div class="h-4 bg-amber-200">200</div>
|
|
2113
|
-
<div class="h-4 bg-amber-300">300</div>
|
|
2114
|
-
<div class="h-4 bg-amber-400">400</div>
|
|
2115
|
-
<div class="h-4 bg-amber-500">500</div>
|
|
2116
|
-
<div class="h-4 bg-amber-600">600</div>
|
|
2117
|
-
<div class="h-4 bg-amber-700">700</div>
|
|
2118
|
-
<div class="h-4 bg-amber-800">800</div>
|
|
2119
|
-
<div class="h-4 bg-amber-900">900</div>
|
|
2120
|
-
<div class="h-4 bg-amber-950">950</div>
|
|
2121
|
-
</div>
|
|
2122
|
-
</div>
|
|
2123
|
-
<div>
|
|
2124
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2125
|
-
<p class="tal">Yellow</p>
|
|
2126
|
-
<div class="h-4 bg-yellow-50">50</div>
|
|
2127
|
-
<div class="h-4 bg-yellow-100">100</div>
|
|
2128
|
-
<div class="h-4 bg-yellow-200">200</div>
|
|
2129
|
-
<div class="h-4 bg-yellow-300">300</div>
|
|
2130
|
-
<div class="h-4 bg-yellow-400">400</div>
|
|
2131
|
-
<div class="h-4 bg-yellow-500">500</div>
|
|
2132
|
-
<div class="h-4 bg-yellow-600">600</div>
|
|
2133
|
-
<div class="h-4 bg-yellow-700">700</div>
|
|
2134
|
-
<div class="h-4 bg-yellow-800">800</div>
|
|
2135
|
-
<div class="h-4 bg-yellow-900">900</div>
|
|
2136
|
-
<div class="h-4 bg-yellow-950">950</div>
|
|
2137
|
-
</div>
|
|
2138
|
-
</div>
|
|
2139
|
-
<div>
|
|
2140
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2141
|
-
<p class="tal">Lime</p>
|
|
2142
|
-
<div class="h-4 bg-lime-50">50</div>
|
|
2143
|
-
<div class="h-4 bg-lime-100">100</div>
|
|
2144
|
-
<div class="h-4 bg-lime-200">200</div>
|
|
2145
|
-
<div class="h-4 bg-lime-300">300</div>
|
|
2146
|
-
<div class="h-4 bg-lime-400">400</div>
|
|
2147
|
-
<div class="h-4 bg-lime-500">500</div>
|
|
2148
|
-
<div class="h-4 bg-lime-600">600</div>
|
|
2149
|
-
<div class="h-4 bg-lime-700">700</div>
|
|
2150
|
-
<div class="h-4 bg-lime-800">800</div>
|
|
2151
|
-
<div class="h-4 bg-lime-900">900</div>
|
|
2152
|
-
<div class="h-4 bg-lime-950">950</div>
|
|
2153
|
-
</div>
|
|
2154
|
-
</div>
|
|
2155
|
-
<div>
|
|
2156
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2157
|
-
<p class="tal">Green</p>
|
|
2158
|
-
<div class="h-4 bg-green-50">50</div>
|
|
2159
|
-
<div class="h-4 bg-green-100">100</div>
|
|
2160
|
-
<div class="h-4 bg-green-200">200</div>
|
|
2161
|
-
<div class="h-4 bg-green-300">300</div>
|
|
2162
|
-
<div class="h-4 bg-green-400">400</div>
|
|
2163
|
-
<div class="h-4 bg-green-500">500</div>
|
|
2164
|
-
<div class="h-4 bg-green-600">600</div>
|
|
2165
|
-
<div class="h-4 bg-green-700">700</div>
|
|
2166
|
-
<div class="h-4 bg-green-800">800</div>
|
|
2167
|
-
<div class="h-4 bg-green-900">900</div>
|
|
2168
|
-
<div class="h-4 bg-green-950">950</div>
|
|
2169
|
-
</div>
|
|
2170
|
-
</div>
|
|
2171
|
-
<div>
|
|
2172
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2173
|
-
<p class="tal">Emerald</p>
|
|
2174
|
-
<div class="h-4 bg-emerald-50">50</div>
|
|
2175
|
-
<div class="h-4 bg-emerald-100">100</div>
|
|
2176
|
-
<div class="h-4 bg-emerald-200">200</div>
|
|
2177
|
-
<div class="h-4 bg-emerald-300">300</div>
|
|
2178
|
-
<div class="h-4 bg-emerald-400">400</div>
|
|
2179
|
-
<div class="h-4 bg-emerald-500">500</div>
|
|
2180
|
-
<div class="h-4 bg-emerald-600">600</div>
|
|
2181
|
-
<div class="h-4 bg-emerald-700">700</div>
|
|
2182
|
-
<div class="h-4 bg-emerald-800">800</div>
|
|
2183
|
-
<div class="h-4 bg-emerald-900">900</div>
|
|
2184
|
-
<div class="h-4 bg-emerald-950">950</div>
|
|
2185
|
-
</div>
|
|
2186
|
-
</div>
|
|
2187
|
-
<div>
|
|
2188
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2189
|
-
<p class="tal">Teal</p>
|
|
2190
|
-
<div class="h-4 bg-teal-50">50</div>
|
|
2191
|
-
<div class="h-4 bg-teal-100">100</div>
|
|
2192
|
-
<div class="h-4 bg-teal-200">200</div>
|
|
2193
|
-
<div class="h-4 bg-teal-300">300</div>
|
|
2194
|
-
<div class="h-4 bg-teal-400">400</div>
|
|
2195
|
-
<div class="h-4 bg-teal-500">500</div>
|
|
2196
|
-
<div class="h-4 bg-teal-600">600</div>
|
|
2197
|
-
<div class="h-4 bg-teal-700">700</div>
|
|
2198
|
-
<div class="h-4 bg-teal-800">800</div>
|
|
2199
|
-
<div class="h-4 bg-teal-900">900</div>
|
|
2200
|
-
<div class="h-4 bg-teal-950">950</div>
|
|
2201
|
-
</div>
|
|
2202
|
-
</div>
|
|
2203
|
-
<div>
|
|
2204
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2205
|
-
<p class="tal">Cyan</p>
|
|
2206
|
-
<div class="h-4 bg-cyan-50">50</div>
|
|
2207
|
-
<div class="h-4 bg-cyan-100">100</div>
|
|
2208
|
-
<div class="h-4 bg-cyan-200">200</div>
|
|
2209
|
-
<div class="h-4 bg-cyan-300">300</div>
|
|
2210
|
-
<div class="h-4 bg-cyan-400">400</div>
|
|
2211
|
-
<div class="h-4 bg-cyan-500">500</div>
|
|
2212
|
-
<div class="h-4 bg-cyan-600">600</div>
|
|
2213
|
-
<div class="h-4 bg-cyan-700">700</div>
|
|
2214
|
-
<div class="h-4 bg-cyan-800">800</div>
|
|
2215
|
-
<div class="h-4 bg-cyan-900">900</div>
|
|
2216
|
-
<div class="h-4 bg-cyan-950">950</div>
|
|
2217
|
-
</div>
|
|
2218
|
-
</div>
|
|
2219
|
-
<div>
|
|
2220
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2221
|
-
<p class="tal">Sky</p>
|
|
2222
|
-
<div class="h-4 bg-sky-50">50</div>
|
|
2223
|
-
<div class="h-4 bg-sky-100">100</div>
|
|
2224
|
-
<div class="h-4 bg-sky-200">200</div>
|
|
2225
|
-
<div class="h-4 bg-sky-300">300</div>
|
|
2226
|
-
<div class="h-4 bg-sky-400">400</div>
|
|
2227
|
-
<div class="h-4 bg-sky-500">500</div>
|
|
2228
|
-
<div class="h-4 bg-sky-600">600</div>
|
|
2229
|
-
<div class="h-4 bg-sky-700">700</div>
|
|
2230
|
-
<div class="h-4 bg-sky-800">800</div>
|
|
2231
|
-
<div class="h-4 bg-sky-900">900</div>
|
|
2232
|
-
<div class="h-4 bg-sky-950">950</div>
|
|
2233
|
-
</div>
|
|
2234
|
-
</div>
|
|
2235
|
-
<div>
|
|
2236
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2237
|
-
<p class="tal">Blue</p>
|
|
2238
|
-
<div class="h-4 bg-blue-50">50</div>
|
|
2239
|
-
<div class="h-4 bg-blue-100">100</div>
|
|
2240
|
-
<div class="h-4 bg-blue-200">200</div>
|
|
2241
|
-
<div class="h-4 bg-blue-300">300</div>
|
|
2242
|
-
<div class="h-4 bg-blue-400">400</div>
|
|
2243
|
-
<div class="h-4 bg-blue-500">500</div>
|
|
2244
|
-
<div class="h-4 bg-blue-600">600</div>
|
|
2245
|
-
<div class="h-4 bg-blue-700">700</div>
|
|
2246
|
-
<div class="h-4 bg-blue-800">800</div>
|
|
2247
|
-
<div class="h-4 bg-blue-900">900</div>
|
|
2248
|
-
<div class="h-4 bg-blue-950">950</div>
|
|
2249
|
-
</div>
|
|
2250
|
-
</div>
|
|
2251
|
-
<div>
|
|
2252
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2253
|
-
<p class="tal">Indigo</p>
|
|
2254
|
-
<div class="h-4 bg-indigo-50">50</div>
|
|
2255
|
-
<div class="h-4 bg-indigo-100">100</div>
|
|
2256
|
-
<div class="h-4 bg-indigo-200">200</div>
|
|
2257
|
-
<div class="h-4 bg-indigo-300">300</div>
|
|
2258
|
-
<div class="h-4 bg-indigo-400">400</div>
|
|
2259
|
-
<div class="h-4 bg-indigo-500">500</div>
|
|
2260
|
-
<div class="h-4 bg-indigo-600">600</div>
|
|
2261
|
-
<div class="h-4 bg-indigo-700">700</div>
|
|
2262
|
-
<div class="h-4 bg-indigo-800">800</div>
|
|
2263
|
-
<div class="h-4 bg-indigo-900">900</div>
|
|
2264
|
-
<div class="h-4 bg-indigo-950">950</div>
|
|
2265
|
-
</div>
|
|
2266
|
-
</div>
|
|
2267
|
-
<div>
|
|
2268
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2269
|
-
<p class="tal">Violet</p>
|
|
2270
|
-
<div class="h-4 bg-violet-50">50</div>
|
|
2271
|
-
<div class="h-4 bg-violet-100">100</div>
|
|
2272
|
-
<div class="h-4 bg-violet-200">200</div>
|
|
2273
|
-
<div class="h-4 bg-violet-300">300</div>
|
|
2274
|
-
<div class="h-4 bg-violet-400">400</div>
|
|
2275
|
-
<div class="h-4 bg-violet-500">500</div>
|
|
2276
|
-
<div class="h-4 bg-violet-600">600</div>
|
|
2277
|
-
<div class="h-4 bg-violet-700">700</div>
|
|
2278
|
-
<div class="h-4 bg-violet-800">800</div>
|
|
2279
|
-
<div class="h-4 bg-violet-900">900</div>
|
|
2280
|
-
<div class="h-4 bg-violet-950">950</div>
|
|
2281
|
-
</div>
|
|
2282
|
-
</div>
|
|
2283
|
-
<div>
|
|
2284
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2285
|
-
<p class="tal">Purple</p>
|
|
2286
|
-
<div class="h-4 bg-purple-50">50</div>
|
|
2287
|
-
<div class="h-4 bg-purple-100">100</div>
|
|
2288
|
-
<div class="h-4 bg-purple-200">200</div>
|
|
2289
|
-
<div class="h-4 bg-purple-300">300</div>
|
|
2290
|
-
<div class="h-4 bg-purple-400">400</div>
|
|
2291
|
-
<div class="h-4 bg-purple-500">500</div>
|
|
2292
|
-
<div class="h-4 bg-purple-600">600</div>
|
|
2293
|
-
<div class="h-4 bg-purple-700">700</div>
|
|
2294
|
-
<div class="h-4 bg-purple-800">800</div>
|
|
2295
|
-
<div class="h-4 bg-purple-900">900</div>
|
|
2296
|
-
<div class="h-4 bg-purple-950">950</div>
|
|
2297
|
-
</div>
|
|
2298
|
-
</div>
|
|
2299
|
-
<div>
|
|
2300
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2301
|
-
<p class="tal">Fuchsia</p>
|
|
2302
|
-
<div class="h-4 bg-fuchsia-50">50</div>
|
|
2303
|
-
<div class="h-4 bg-fuchsia-100">100</div>
|
|
2304
|
-
<div class="h-4 bg-fuchsia-200">200</div>
|
|
2305
|
-
<div class="h-4 bg-fuchsia-300">300</div>
|
|
2306
|
-
<div class="h-4 bg-fuchsia-400">400</div>
|
|
2307
|
-
<div class="h-4 bg-fuchsia-500">500</div>
|
|
2308
|
-
<div class="h-4 bg-fuchsia-600">600</div>
|
|
2309
|
-
<div class="h-4 bg-fuchsia-700">700</div>
|
|
2310
|
-
<div class="h-4 bg-fuchsia-800">800</div>
|
|
2311
|
-
<div class="h-4 bg-fuchsia-900">900</div>
|
|
2312
|
-
<div class="h-4 bg-fuchsia-950">950</div>
|
|
2313
|
-
</div>
|
|
2314
|
-
</div>
|
|
2315
|
-
<div>
|
|
2316
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2317
|
-
<p class="tal">Pink</p>
|
|
2318
|
-
<div class="h-4 bg-pink-50">50</div>
|
|
2319
|
-
<div class="h-4 bg-pink-100">100</div>
|
|
2320
|
-
<div class="h-4 bg-pink-200">200</div>
|
|
2321
|
-
<div class="h-4 bg-pink-300">300</div>
|
|
2322
|
-
<div class="h-4 bg-pink-400">400</div>
|
|
2323
|
-
<div class="h-4 bg-pink-500">500</div>
|
|
2324
|
-
<div class="h-4 bg-pink-600">600</div>
|
|
2325
|
-
<div class="h-4 bg-pink-700">700</div>
|
|
2326
|
-
<div class="h-4 bg-pink-800">800</div>
|
|
2327
|
-
<div class="h-4 bg-pink-900">900</div>
|
|
2328
|
-
<div class="h-4 bg-pink-950">950</div>
|
|
2329
|
-
</div>
|
|
2330
|
-
</div>
|
|
2331
|
-
<div>
|
|
2332
|
-
<div class="grid-0 cols-12 tac va-c">
|
|
2333
|
-
<p class="tal">Rose</p>
|
|
2334
|
-
<div class="h-4 bg-rose-50">50</div>
|
|
2335
|
-
<div class="h-4 bg-rose-100">100</div>
|
|
2336
|
-
<div class="h-4 bg-rose-200">200</div>
|
|
2337
|
-
<div class="h-4 bg-rose-300">300</div>
|
|
2338
|
-
<div class="h-4 bg-rose-400">400</div>
|
|
2339
|
-
<div class="h-4 bg-rose-500">500</div>
|
|
2340
|
-
<div class="h-4 bg-rose-600">600</div>
|
|
2341
|
-
<div class="h-4 bg-rose-700">700</div>
|
|
2342
|
-
<div class="h-4 bg-rose-800">800</div>
|
|
2343
|
-
<div class="h-4 bg-rose-900">900</div>
|
|
2344
|
-
<div class="h-4 bg-rose-950">950</div>
|
|
2345
|
-
</div>
|
|
2346
|
-
</div>
|
|
2347
|
-
</section>
|
|
2348
|
-
|
|
2349
2169
|
</div>
|
|
2350
2170
|
<div id="app"></div>
|
|
2351
2171
|
<script type="module" src="/main.js"></script>
|