nk_jtb 0.7.0 → 0.8.1

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.
Files changed (121) hide show
  1. package/index.html +1249 -29
  2. package/main.js +2 -2
  3. package/package.json +30 -25
  4. package/public/images/favicon.svg +1 -0
  5. package/public/images/logo.svg +1 -1
  6. package/public/svg/blur-red.svg +12 -0
  7. package/public/svg/blur.svg +1 -0
  8. package/public/svg/naykel-ui.svg +1 -0
  9. package/readme.md +1 -6
  10. package/src/_config.scss +12 -0
  11. package/src/_nk.scss +112 -0
  12. package/src/_properties.scss +0 -0
  13. package/{scss → src}/base/_base.scss +104 -107
  14. package/{scss → src}/base/_root.scss +1 -1
  15. package/src/base/_vars_all.scss +6 -0
  16. package/src/base/_vars_base.scss +95 -0
  17. package/src/base/_vars_colors.scss +41 -0
  18. package/src/base/_vars_components.scss +1 -0
  19. package/src/base/_vars_utility_maps.scss +112 -0
  20. package/src/color/_shades.scss +18 -0
  21. package/src/color/_tailwind-colors.scss +299 -0
  22. package/src/color/_themes.scss +104 -0
  23. package/src/color/index.scss +3 -0
  24. package/src/components/_button.scss +51 -0
  25. package/src/extras/_code.scss +26 -0
  26. package/src/extras/agate.css +139 -0
  27. package/src/extras/github-dark-dimmed.css +124 -0
  28. package/src/extras/monokai-sublime.css +80 -0
  29. package/src/extras/panda-syntax-dark.css +99 -0
  30. package/src/forms/_choices.scss +411 -0
  31. package/{scss → src}/forms/_form.scss +15 -21
  32. package/src/functions/_colorFunctions.scss +60 -0
  33. package/src/functions/_colorShades.scss +27 -0
  34. package/src/functions/_deepMapCheck.scss +28 -0
  35. package/src/functions/_deepMapGet.scss +24 -0
  36. package/src/functions/_get.scss +27 -0
  37. package/{scss → src}/functions/_helpers.scss +22 -9
  38. package/src/functions/_mapMerge.scss +18 -0
  39. package/src/functions/_strExplode.scss +45 -0
  40. package/src/jtb.scss +48 -0
  41. package/src/mixins/_colorShadeClasses.scss +40 -0
  42. package/src/mixins/_extendedThemeClass.scss +70 -0
  43. package/{scss → src}/mixins/_media.scss +18 -20
  44. package/{scss/mixins/_makeResponsiveClasses.scss → src/mixins/_responsiveClassCreators.scss} +29 -23
  45. package/src/mixins/_utilityClassCreators.scss +37 -0
  46. package/src/mixins/helpers/_basicColorScheme.scss +7 -0
  47. package/src/mixins/helpers/_classCreators.scss +12 -0
  48. package/src/mixins/helpers/_index.scss +3 -0
  49. package/src/mixins/helpers/_propertyCreators.scss +34 -0
  50. package/src/play.scss +31 -0
  51. package/src/scss/_nk.scss +111 -0
  52. package/{scss → src/scss}/base/_content_gap.scss +1 -1
  53. package/src/scss/base/_vars_components.scss +79 -0
  54. package/{scss → src/scss}/components/_accordion.scss +1 -2
  55. package/src/scss/components/_article.scss +17 -0
  56. package/{scss → src/scss}/components/_box.scss +3 -3
  57. package/{scss → src/scss}/components/_dropdown.scss +6 -2
  58. package/{scss → src/scss}/components/_hero.scss +2 -2
  59. package/{scss → src/scss}/components/_icon.scss +1 -1
  60. package/{scss → src/scss}/components/_list.scss +3 -3
  61. package/{scss → src/scss}/components/_menu.scss +5 -3
  62. package/src/scss/components/_navbar.scss +72 -0
  63. package/{scss → src/scss}/components/_other.scss +1 -1
  64. package/{scss → src/scss}/forms/_control.scss +6 -6
  65. package/src/scss/forms/_index.scss +4 -0
  66. package/{scss → src/scss}/forms/_toggle.scss +1 -1
  67. package/src/scss/functions/_classNaming.scss +26 -0
  68. package/{scss → src/scss}/layouts/__two-column.scss +2 -2
  69. package/src/scss/mixins/_createState.scss +33 -0
  70. package/src/scss/mixins/_makeMagicClass.scss +80 -0
  71. package/{scss → src/scss}/mixins/_makeMagicGrid2Cols.scss +8 -8
  72. package/src/scss/mixins/_makeMagicGridEqualWidths.scss +60 -0
  73. package/{scss → src/scss}/mixins/_positionUtilityClasses.scss +12 -21
  74. package/{scss → src/scss}/utilities/_border.scss +16 -13
  75. package/{scss → src/scss}/utilities/_display_visibility.scss +13 -11
  76. package/{scss → src/scss}/utilities/_flex.scss +2 -2
  77. package/{scss → src/scss}/utilities/_general.scss +11 -21
  78. package/src/scss/utilities/_grid.scss +84 -0
  79. package/{scss → src/scss}/utilities/_position.scss +5 -2
  80. package/{scss → src/scss}/utilities/_sizes.scss +14 -18
  81. package/{scss → src/scss}/utilities/_spacing.scss +47 -58
  82. package/{scss → src/scss}/utilities/_state.scss +1 -1
  83. package/{scss → src/scss}/utilities/_text.scss +21 -35
  84. package/src/scss/utilities/_themes.scss +33 -0
  85. package/src/utilities/_general.scss +8 -0
  86. package/src/utilities/_grid.scss +46 -0
  87. package/src/utilities/_size.scss +44 -0
  88. package/src/utilities/_text.scss +15 -0
  89. package/{scss → src}/utilities/_transition.scss +8 -2
  90. package/src/utilities/_utilities.scss +25 -0
  91. package/vite.config.js +31 -0
  92. package/public/images/favicon.ico +0 -0
  93. package/public/naykel-ui-SVG-sprite.svg +0 -1
  94. package/public/nk.svg +0 -5
  95. package/scss/_nk.scss +0 -185
  96. package/scss/base/_vars_all.scss +0 -5
  97. package/scss/base/_vars_base.scss +0 -122
  98. package/scss/base/_vars_colors.scss +0 -39
  99. package/scss/base/_vars_components.scss +0 -65
  100. package/scss/base/_vars_utility_maps.scss +0 -75
  101. package/scss/components/_button.scss +0 -49
  102. package/scss/components/_navbar.scss +0 -43
  103. package/scss/forms/_index.scss +0 -3
  104. package/scss/functions/_colorFunctions.scss +0 -35
  105. package/scss/jtb.scss +0 -44
  106. package/scss/mixins/_colorSchemeSimple.scss +0 -12
  107. package/scss/mixins/_colorShades.scss +0 -29
  108. package/scss/mixins/_createState.scss +0 -17
  109. package/scss/mixins/_helpers.scss +0 -33
  110. package/scss/mixins/_makeColorSchemeAdvanced.scss +0 -58
  111. package/scss/mixins/_makeMagicClass.scss +0 -61
  112. package/scss/mixins/_makeMagicGridFixedWidth.scss +0 -55
  113. package/scss/mixins/_makeResponsivePositionUtilities.scss +0 -59
  114. package/scss/play.scss +0 -15
  115. package/scss/utilities/_grid.scss +0 -103
  116. package/scss/utilities/_themes.scss +0 -121
  117. /package/{scss → src}/base/_vars_class_names.scss +0 -0
  118. /package/{scss → src/scss}/components/_sidebar.scss +0 -0
  119. /package/{scss → src/scss}/forms/_file.scss +0 -0
  120. /package/{scss → src/scss}/utilities/_opacity.scss +0 -0
  121. /package/{scss → src/scss}/utilities/_translate.scss +0 -0
package/index.html CHANGED
@@ -3,56 +3,1276 @@
3
3
 
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
- <link rel="icon" type="image/svg+xml" href="/nk.svg" />
6
+ <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
7
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
8
  <title>NayKel JTB</title>
9
- <link rel="stylesheet" href="">
10
9
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
11
- <!-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> -->
10
+ <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
11
+ </head>
12
+
13
+ <body class="dark">
14
+
12
15
 
13
16
  <style>
14
- .abc {
15
- grid-template-columns: 3rem 8rem 1fr 5rem;
17
+ @keyframes pulse {
18
+ 50% {
19
+ opacity: .5
20
+ }
16
21
  }
17
22
 
23
+ .animate-pulse-slow {
24
+ animation: pulse 13s ease-in-out infinite;
25
+ }
18
26
  </style>
19
- </head>
20
27
 
21
- <body>
22
28
 
23
- <div class="container pxy-5">
29
+ <section class="light bdr-0">
30
+
31
+ <div class="container flex gg-5">
32
+ <div class="relative">
33
+ <img src="/images/naykel-400.png" alt="naykel">
34
+ <img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 44s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
35
+ </div>
36
+ <div>
37
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vel ratione eius veniam sapiente corporis quod nihil, quos perspiciatis expedita!</p>
38
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda reiciendis, mollitia sed non corporis ex quasi vel aperiam sequi autem consectetur adipisci eligendi ipsum labore aliquid est at nesciunt quia porro neque nihil impedit. Ipsam dolorem libero consectetur ut expedita.</p>
39
+ </div>
40
+ </div>
41
+
42
+ </section>
43
+
44
+ <div class="relative overflow-x-clip h-24">
45
+
46
+ <img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 4s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
47
+ <img style="
48
+ position: absolute;
49
+ width: 700px;
50
+ height: 700px;
51
+ right: 200px;
52
+ bottom: -120px;
53
+ animation-duration: 5s;
54
+ animation-delay: 1.5s;
55
+ " src="/svg/blur-red.svg" class="animate-pulse-slow">
56
+
57
+ </div>
24
58
 
25
- <h2>Create a css grid that can be used in a data table layout</h2>
59
+ <div class="relative overflow-x-clip h-24 light">
26
60
 
61
+ <img style="
62
+ position: absolute;
63
+ width: 700px;
64
+ height: 700px;
65
+ right: -5%;
66
+ bottom: -240px;
67
+ animation-duration: 4s;
68
+ " src="/svg/blur-red.svg" class="animate-pulse-slow">
27
69
 
28
- <div class="grid abc">
29
- <div class="bx blue"></div>
30
- <div class="bx blue"></div>
31
- <div class="bx blue"></div>
32
- <div class="bx blue"></div>
33
- <div class="bx blue"></div>
34
- <div class="bx orange"></div>
35
- <div class="bx orange"></div>
36
- <div class="bx orange"></div>
37
- <div class="bx orange"></div>
38
- <div class="bx orange"></div>
70
+ <img style="
71
+ position: absolute;
72
+ width: 700px;
73
+ height: 700px;
74
+ right: 200px;
75
+ bottom: -120px;
76
+ animation-duration: 5s;
77
+ animation-delay: 1.5s;
78
+ " src="/svg/blur-red.svg" class="animate-pulse-slow">
79
+
80
+ </div>
81
+
82
+
83
+
84
+ <!-- <img src="/svg/blur-red.svg" class="animate-pulse-slow">
85
+
86
+ <img style=" animation-duration: 30s; " src="/svg/blur.svg" class="animate-pulse-slow"> -->
87
+
88
+ <div>
89
+ <header id="nk-header" class="container py">
90
+ <div class="container flex space-between">
91
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo "></a>
92
+ <div class="navbar">
93
+ <nav>
94
+ <ul>
95
+ <li><a class="active" href="#">Home</a></li>
96
+ <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true" x-on:mouseleave="showChildren=false">
97
+ <a href="#">
98
+ Services
99
+ <svg class="icon sm">
100
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
101
+ </svg>
102
+ </a>
103
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration.200ms style="display: none;">
104
+ <ul class="menu bx pxy-0 w-full">
105
+ <li><a href="#">Graphic Design</a></li>
106
+ <li><a href="#">Digital Marketing</a></li>
107
+ <li><a href="#">Mobile App Development</a></li>
108
+ <li><a href="#">IT Consulting</a></li>
109
+ </ul>
110
+ </div>
111
+ </li>
112
+ <li><a href="#">About</a></li>
113
+ <li><a href="#">Contact</a></li>
114
+ </ul>
115
+ </nav>
116
+ <div>
117
+ <button class="btn">Sign in</button>
118
+ <button class="btn primary">Sign up</button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </header>
123
+ <div class="navbar ha-l">
124
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
125
+ <nav>
126
+ <ul>
127
+ <li class="dd">
128
+ <a href="#">
129
+ Parent (css)
130
+ <svg class="icon sm">
131
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
132
+ </svg>
133
+ </a>
134
+ <div class="dd-content mt-05">
135
+ <ul class="menu bx pxy-0">
136
+ <li><a class="txt-red" href="#">Child Override</a></li>
137
+ <li><a href="#">Child</a></li>
138
+ <li><a href="#">Child</a></li>
139
+ </ul>
140
+ </div>
141
+ </li>
142
+ <li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true" x-on:mouseleave="showChildren=true">
143
+ <a href="#">
144
+ Parent (alpine hover)
145
+ <svg class="icon sm">
146
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
147
+ </svg>
148
+ </a>
149
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration style="display: none;">
150
+ <ul class="menu bx pxy-0 w-full">
151
+ <li><a class="txt-red" href="#">Child Override</a></li>
152
+ <li><a href="#">Child</a></li>
153
+ <li><a href="#">Child</a></li>
154
+ </ul>
155
+ </div>
156
+ </li>
157
+ <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
158
+ <a href="#" x-on:click.prevent="showChildren=!showChildren">
159
+ Parent (alpine click)
160
+ <svg class="icon sm">
161
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
162
+ </svg>
163
+ </a>
164
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration style="display: none;">
165
+ <ul class="menu bx pxy-0 w-full">
166
+ <li><a class="txt-red" href="#">Child Override</a></li>
167
+ <li><a href="#">Child</a></li>
168
+ <li><a href="#">Child</a></li>
169
+ </ul>
170
+ </div>
171
+ </li>
172
+ <li><a class="txt-red" href="#">Override</a></li>
173
+ <li><a class="active" href="#">Active</a></li>
174
+ <li><a class="active nav-item" href="#">Active (nav-item)</a></li>
175
+
176
+ </ul>
177
+ </nav>
39
178
  </div>
179
+ <div class="navbar ha-l primary">
180
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
181
+ <nav>
182
+ <ul>
183
+ <li class="dd">
184
+ <a href="#">
185
+ Parent (css)
186
+ <svg class="icon sm">
187
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
188
+ </svg>
189
+ </a>
190
+ <div class="dd-content mt-05">
191
+ <ul class="menu bx pxy-0">
192
+ <li><a href="#">Child</a></li>
193
+ <li><a href="#">Child</a></li>
194
+ <li><a href="#">Child</a></li>
195
+ </ul>
196
+ </div>
197
+ </li>
198
+ <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true" x-on:mouseleave="showChildren=false">
199
+ <a href="#">
200
+ Parent (alpine hover)
201
+ <svg class="icon sm">
202
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
203
+ </svg>
204
+ </a>
205
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration style="display: none;">
206
+ <ul class="menu bx pxy-0 w-full">
207
+ <li><a href="#">Child</a></li>
208
+ <li><a href="#">Child</a></li>
209
+ <li><a href="#">Child</a></li>
210
+ </ul>
211
+ </div>
212
+ </li>
213
+ <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
214
+ <a href="#" x-on:click.prevent="showChildren=!showChildren">
215
+ Parent (alpine click)
216
+ <svg class="icon sm">
217
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
218
+ </svg>
219
+ </a>
220
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration style="display: none;">
221
+ <ul class="menu bx pxy-0 w-full">
222
+ <li><a href="#">Child</a></li>
223
+ <li><a href="#">Child</a></li>
224
+ <li><a href="#">Child</a></li>
225
+ </ul>
226
+ </div>
227
+ </li>
40
228
 
41
- <style>
42
- .special {
43
- grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
44
- }
229
+ </ul>
230
+ </nav>
231
+ </div>
45
232
 
46
- .item {
47
- grid-column: 100px;
48
- }
233
+ <div class="quick-hide-wrapper zebra c-py-5-3-2">
234
+ <section id="typography">
235
+ <div class="container maxw-md">
236
+ <h2 class="title txt-3">Typography</h2>
237
+
238
+ <h1>Heading 1</h1>
239
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
240
+ <h2>Heading 2</h2>
241
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
242
+ <h3>Heading 3</h3>
243
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
244
+ <h4>Heading 4</h4>
245
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
246
+ <h5>Heading 5</h5>
247
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
248
+ <h6>Heading 6</h6>
249
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
49
250
 
50
- </style>
251
+ <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
51
252
 
52
- <div class="grid special">
253
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum ipsam!</p>
53
254
 
255
+ <h3 class="title">Text Sizes</h3>
256
+ <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
257
+ <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
258
+ <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
259
+ <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
260
+ <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
261
+
262
+ </div>
263
+ </section>
264
+ <section id="menu">
265
+ <div class="container">
266
+ <h2 class="title txt-3">Menu Component</h2>
267
+ <h4>Base Component</h4>
268
+ <div class="bx grid md:cols-3">
269
+ <div class="menu">
270
+ <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
271
+ <div class="menu-title">Menu Title</div>
272
+ <a href="">Item</a>
273
+ <a href="">Parent</a>
274
+ <a href="" class="active">Active</a>
275
+ </div>
276
+ <nav class="menu">
277
+ <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
278
+ <div class="menu-title">Menu Title</div>
279
+ <a href="">Item</a>
280
+ <a href="">Parent</a>
281
+ <a href="" class="active">Active</a>
282
+ </nav>
283
+ <ul class="menu">
284
+ <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
285
+ <div class="menu-title">Menu Title</div>
286
+ <li><a href="">Item</a></li>
287
+ <li><a href="">Parent</a></li>
288
+ <li><a href="" class="active">Active</a></li>
289
+ </ul>
290
+ </div>
291
+ <h4>With Menu-Item</h4>
292
+ <div class="bx grid md:cols-3">
293
+ <div class="menu">
294
+ <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
295
+ <div class="menu-title">Menu Title</div>
296
+ <a class="menu-item" href="">Item</a>
297
+ <a class="menu-item" href="">Parent</a>
298
+ <a class="menu-item active" href="">Active</a>
299
+ </div>
300
+ <nav class="menu">
301
+ <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
302
+ <div class="menu-title">Menu Title</div>
303
+ <a class="menu-item" href="">Item</a>
304
+ <a class="menu-item" href="">Parent</a>
305
+ <a class="menu-item active" href="">Active</a>
306
+ </nav>
307
+ <ul class="menu">
308
+ <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
309
+ <div class="menu-title">Menu Title</div>
310
+ <li><a class="menu-item" href="">Item</a></li>
311
+ <li><a class="menu-item" href="">Parent</a></li>
312
+ <li><a class="menu-item active" href="">Active</a></li>
313
+ </ul>
314
+ </div>
315
+ <h4>Collapse</h4>
316
+ </div>
317
+ </section>
318
+ <section id="button-theme-examples">
319
+ <div class="container">
320
+ <h2 class="title txt-3">Buttons</h2>
321
+ <h4>Base Colors</h4>
322
+ <div class="grid-1 cols-9">
323
+ <button class="btn stone">stone</button>
324
+ <button class="btn brown">brown</button>
325
+ <button class="btn red">red</button>
326
+ <button class="btn orange">orange</button>
327
+ <button class="btn amber">amber</button>
328
+ <button class="btn yellow">yellow</button>
329
+ <button class="btn lime">lime</button>
330
+ <button class="btn emerald">emerald</button>
331
+ <button class="btn green">green</button>
332
+ <button class="btn teal">teal</button>
333
+ <button class="btn cyan">cyan</button>
334
+ <button class="btn sky">sky</button>
335
+ <button class="btn blue">blue</button>
336
+ <button class="btn indigo">indigo</button>
337
+ <button class="btn purple">purple</button>
338
+ <button class="btn fuchsia">fuchsia</button>
339
+ <button class="btn pink">pink</button>
340
+ <button class="btn rose">rose</button>
341
+ </div>
342
+ <h4>Theme Colors and Alert Colors</h4>
343
+ <div class="grid cols-10">
344
+ <button class="btn primary">primary</button>
345
+ <button class="btn secondary">secondary</button>
346
+ <button class="btn accent">accent</button>
347
+ <button class="btn light">light</button>
348
+ <button class="btn dark">dark</button>
349
+ <button class="btn muted">muted</button>
350
+ <button class="btn danger">danger</button>
351
+ <button class="btn info">info</button>
352
+ <button class="btn success">success</button>
353
+ <button class="btn warning">warning</button>
354
+ </div>
355
+ </div>
356
+ </section>
357
+ <section id="theme-examples">
358
+ <div class="container">
359
+ <h2 class="title txt-3">Basic Themes</h2>
360
+ <h4>Base Colors</h4>
361
+ <div class="grid-1 cols-6">
362
+ <div class="pxy bdr-3 tac stone">stone</div>
363
+ <div class="pxy bdr-3 tac brown">brown</div>
364
+ <div class="pxy bdr-3 tac red">red</div>
365
+ <div class="pxy bdr-3 tac orange">orange</div>
366
+ <div class="pxy bdr-3 tac amber">amber</div>
367
+ <div class="pxy bdr-3 tac yellow">yellow</div>
368
+ <div class="pxy bdr-3 tac lime">lime</div>
369
+ <div class="pxy bdr-3 tac emerald">emerald</div>
370
+ <div class="pxy bdr-3 tac green">green</div>
371
+ <div class="pxy bdr-3 tac teal">teal</div>
372
+ <div class="pxy bdr-3 tac cyan">cyan</div>
373
+ <div class="pxy bdr-3 tac sky">sky</div>
374
+ <div class="pxy bdr-3 tac blue">blue</div>
375
+ <div class="pxy bdr-3 tac indigo">indigo</div>
376
+ <div class="pxy bdr-3 tac purple">purple</div>
377
+ <div class="pxy bdr-3 tac fuchsia">fuchsia</div>
378
+ <div class="pxy bdr-3 tac pink">pink</div>
379
+ <div class="pxy bdr-3 tac rose">rose</div>
380
+ </div>
381
+ <h4>Theme Colors and Alert Colors</h4>
382
+ <div class="grid cols-5">
383
+ <div class="pxy bdr-3 tac primary">primary</div>
384
+ <div class="pxy bdr-3 tac secondary">secondary</div>
385
+ <div class="pxy bdr-3 tac accent">accent</div>
386
+ <div class="pxy bdr-3 tac light">light</div>
387
+ <div class="pxy bdr-3 tac dark">dark</div>
388
+ <div class="pxy bdr-3 tac muted">muted</div>
389
+ <div class="pxy bdr-3 tac danger">danger</div>
390
+ <div class="pxy bdr-3 tac info">info</div>
391
+ <div class="pxy bdr-3 tac success">success</div>
392
+ <div class="pxy bdr-3 tac warning">warning</div>
393
+ </div>
394
+ </div>
395
+ </section>
396
+ <section id="theme-examples-with-state">
397
+ <div class="container">
398
+ <h2 class="title txt-3">Themes With State</h2>
399
+ <h4>Base Colors</h4>
400
+ <div class="grid-1 cols-6">
401
+ <div class="pxy bdr-3 tac withState stone">stone</div>
402
+ <div class="pxy bdr-3 tac withState brown">brown</div>
403
+ <div class="pxy bdr-3 tac withState red">red</div>
404
+ <div class="pxy bdr-3 tac withState orange">orange</div>
405
+ <div class="pxy bdr-3 tac withState amber">amber</div>
406
+ <div class="pxy bdr-3 tac withState yellow">yellow</div>
407
+ <div class="pxy bdr-3 tac withState lime">lime</div>
408
+ <div class="pxy bdr-3 tac withState emerald">emerald</div>
409
+ <div class="pxy bdr-3 tac withState green">green</div>
410
+ <div class="pxy bdr-3 tac withState teal">teal</div>
411
+ <div class="pxy bdr-3 tac withState cyan">cyan</div>
412
+ <div class="pxy bdr-3 tac withState sky">sky</div>
413
+ <div class="pxy bdr-3 tac withState blue">blue</div>
414
+ <div class="pxy bdr-3 tac withState indigo">indigo</div>
415
+ <div class="pxy bdr-3 tac withState purple">purple</div>
416
+ <div class="pxy bdr-3 tac withState fuchsia">fuchsia</div>
417
+ <div class="pxy bdr-3 tac withState pink">pink</div>
418
+ <div class="pxy bdr-3 tac withState rose">rose</div>
419
+ </div>
420
+ <h4>Theme Colors and Alert Colors</h4>
421
+ <div class="grid cols-5">
422
+ <div class="pxy bdr-3 tac withState primary">primary</div>
423
+ <div class="pxy bdr-3 tac withState secondary">secondary</div>
424
+ <div class="pxy bdr-3 tac withState accent">accent</div>
425
+ <div class="pxy bdr-3 tac withState light">light</div>
426
+ <div class="pxy bdr-3 tac withState dark">dark</div>
427
+ <div class="pxy bdr-3 tac withState muted">muted</div>
428
+ <div class="pxy bdr-3 tac withState danger">danger</div>
429
+ <div class="pxy bdr-3 tac withState info">info</div>
430
+ <div class="pxy bdr-3 tac withState success">success</div>
431
+ <div class="pxy bdr-3 tac withState warning">warning</div>
432
+ </div>
433
+ </div>
434
+ </section>
435
+ <section id="button-and-form-controls">
436
+ <div class="container">
437
+ <h2 class="title">Buttons and Form Controls</h2>
438
+
439
+ <div class="my">
440
+ <button class="btn primary">primary</button>
441
+ <input id="input" name="input" type="text" placeholder="Text Input">
442
+ <button type="button">Button</button>
443
+ <button type="reset">Reset</button>
444
+ <button type="submit">Submit</button>
445
+ </div>
446
+
447
+ <div class="frm-row">
448
+ <label for="success" class="txt-success-light">Your name</label>
449
+ <input type="text" id="success" class="success-light" placeholder="Success input">
450
+ <p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success message.</p>
451
+ </div>
452
+
453
+ <div class="frm-row">
454
+ <label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label>
455
+ <input type="text" id="error" class="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" placeholder="Error input">
456
+ <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
457
+ </div>
458
+
459
+ <div class="frm-row">
460
+ <div class="withAddons">
461
+ <div class="leadingAddon light">
462
+ <svg class="icon txt-muted">
463
+ <use xlink:href="/svg/naykel-ui.svg#user"></use>
464
+ </svg>
465
+ </div>
466
+ <div class="trailingAddon light">
467
+ <svg class="icon txt-muted">
468
+ <use xlink:href="/svg/naykel-ui.svg#tick-round"></use>
469
+ </svg>
470
+ </div>
471
+ <input type="text">
472
+ </div>
473
+ </div>
474
+
475
+ </div>
476
+ </section>
54
477
  </div>
55
478
 
479
+ <main class="container maxw-lg c-py-3-2">
480
+ <section>
481
+ <h2>Theme Boxes</h2>
482
+ <div class="grid cols-3 my">
483
+ <div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla debitis molestiae expedita reiciendis molestias.
484
+ <a href="">Link</a>
485
+ </div>
486
+ <div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla debitis molestiae expedita reiciendis molestias.
487
+ <a href="">Link</a>
488
+ </div>
489
+ <div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla debitis molestiae expedita reiciendis molestias.
490
+ <a href="">Link</a>
491
+ </div>
492
+ </div>
493
+ </section>
494
+
495
+ <select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
496
+ <option selected>Choose a country</option>
497
+ <option value="US">United States</option>
498
+ <option value="CA">Canada</option>
499
+ <option value="FR">France</option>
500
+ <option value="DE">Germany</option>
501
+ </select>
502
+
503
+
504
+ <section>
505
+ <h2>Form Controls and Buttons</h2>
506
+ <select class="w-full" multiple>
507
+ <option value="Sports">Sports</option>
508
+ <option value="Entertainment">Entertainment</option>
509
+ <option value="Science and Technology">Science and Technology</option>
510
+ <option value="Arts and Culture">Arts and Culture</option>
511
+ <option value="Health and Wellness">Health and Wellness</option>
512
+ </select>
513
+
514
+ </section>
515
+ <article>
516
+
517
+
518
+
519
+ <div class="flex">
520
+ <div>
521
+ <ul class="w-10">
522
+ <li>One</li>
523
+ <li>Two</li>
524
+ <li>Three</li>
525
+ </ul>
526
+ </div>
527
+ <div>
528
+ <ol class="w-10">
529
+ <li>One</li>
530
+ <li>Two</li>
531
+ <li>Three</li>
532
+ </ol>
533
+ </div>
534
+ <nav>
535
+ <ul class="w-10">
536
+ <li>Nav Item One</li>
537
+ <li>Nav Item Two</li>
538
+ <li>Nav Item Three</li>
539
+ </ul>
540
+ </nav>
541
+ </div>
542
+
543
+ <ul>
544
+ <li>Lorem ipsum dolor sit amet.</li>
545
+ <li>Lorem ipsum dolor sit amet.</li>
546
+ <li>Lorem ipsum dolor sit amet.</li>
547
+ </ul>
548
+ </article>
549
+
550
+ <section id="alerts">
551
+ <h2>Alerts</h2>
552
+ <div class="grid cols-2">
553
+ <div class="bx danger flex">
554
+ <svg class="icon wh-3 fs0 mr-2">
555
+ <use xlink:href="/svg/naykel-ui.svg#warning"></use>
556
+ </svg>
557
+ <div>
558
+ <div class="bx-title">Alert Title</div>
559
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
560
+ </div>
561
+ </div>
562
+ <div class="bx danger-light flex">
563
+ <svg class="icon wh-3 fs0 mr-2">
564
+ <use xlink:href="/svg/naykel-ui.svg#warning"></use>
565
+ </svg>
566
+ <div>
567
+ <div class="bx-title">Alert Title</div>
568
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
569
+ </div>
570
+ </div>
571
+ <div class="bx info flex">
572
+ <svg class="icon wh-3 fs0 mr-2">
573
+ <use xlink:href="/svg/naykel-ui.svg#info"></use>
574
+ </svg>
575
+ <div>
576
+ <div class="bx-title">Alert Title</div>
577
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
578
+ </div>
579
+ </div>
580
+ <div class="bx info-light flex">
581
+ <svg class="icon wh-3 fs0 mr-2">
582
+ <use xlink:href="/svg/naykel-ui.svg#info"></use>
583
+ </svg>
584
+ <div>
585
+ <div class="bx-title">Alert Title</div>
586
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
587
+ </div>
588
+ </div>
589
+ <div class="bx success flex">
590
+ <svg class="icon wh-3 fs0 mr-2">
591
+ <use xlink:href="/svg/naykel-ui.svg#success"></use>
592
+ </svg>
593
+ <div>
594
+ <div class="bx-title">Alert Title</div>
595
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
596
+ </div>
597
+ </div>
598
+ <div class="bx success-light flex">
599
+ <svg class="icon wh-3 fs0 mr-2">
600
+ <use xlink:href="/svg/naykel-ui.svg#success"></use>
601
+ </svg>
602
+ <div>
603
+ <div class="bx-title">Alert Title</div>
604
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
605
+ </div>
606
+ </div>
607
+ <div class="bx warning flex">
608
+ <svg class="icon wh-3 fs0 mr-2">
609
+ <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
610
+ </svg>
611
+ <div>
612
+ <div class="bx-title">Alert Title</div>
613
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
614
+ </div>
615
+ </div>
616
+ <div class="bx warning-light flex">
617
+ <svg class="icon wh-3 fs0 mr-2">
618
+ <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
619
+ </svg>
620
+ <div>
621
+ <div class="bx-title">Alert Title</div>
622
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
623
+ </div>
624
+ </div>
625
+ </div>
626
+ </section>
627
+
628
+ <section id="tables">
629
+ <h2>Tables</h2>
630
+ <table>
631
+ <thead>
632
+ <tr>
633
+ <th>Table Header</th>
634
+ <th>Table Header</th>
635
+ <th>Table Header</th>
636
+ </tr>
637
+ </thead>
638
+ <tbody>
639
+ <tr>
640
+ <td>Table Data</td>
641
+ <td>Table Data</td>
642
+ <td>Table Data</td>
643
+ </tr>
644
+ <tr>
645
+ <td>Table Data</td>
646
+ <td>Table Data</td>
647
+ <td>Table Data</td>
648
+ </tr>
649
+ <tr>
650
+ <td>Table Data</td>
651
+ <td>Table Data</td>
652
+ <td>Table Data</td>
653
+ </tr>
654
+ </tbody>
655
+ </table>
656
+
657
+ </section>
658
+ </main>
659
+
660
+ <footer id="nk-footer">
661
+
662
+ </footer>
663
+
664
+
665
+ <section id="base-color-shades">
666
+ <div class="grid-0 cols-12 tac va-c">
667
+ <p class="tal">Stone</p>
668
+ <div class="py stone-1">1</div>
669
+ <div class="py stone-2">2</div>
670
+ <div class="py stone-3">3</div>
671
+ <div class="py stone-4">4</div>
672
+ <div class="py stone-5">5</div>
673
+ <div class="py stone-6">6</div>
674
+ <div class="py stone-7">7</div>
675
+ <div class="py stone-8">8</div>
676
+ <div class="py stone-9">9</div>
677
+ <div class="py stone-10">10</div>
678
+ <div class="py stone-11">11</div>
679
+ </div>
680
+ <div class="grid-0 cols-12 tac va-c">
681
+ <p class="tal">Brown</p>
682
+ <div class="py brown-1">1</div>
683
+ <div class="py brown-2">2</div>
684
+ <div class="py brown-3">3</div>
685
+ <div class="py brown-4">4</div>
686
+ <div class="py brown-5">5</div>
687
+ <div class="py brown-6">6</div>
688
+ <div class="py brown-7">7</div>
689
+ <div class="py brown-8">8</div>
690
+ <div class="py brown-9">9</div>
691
+ <div class="py brown-10">10</div>
692
+ <div class="py brown-11">11</div>
693
+ </div>
694
+ <div class="grid-0 cols-12 tac va-c">
695
+ <p class="tal">Red</p>
696
+ <div class="py red-1">1</div>
697
+ <div class="py red-2">2</div>
698
+ <div class="py red-3">3</div>
699
+ <div class="py red-4">4</div>
700
+ <div class="py red-5">5</div>
701
+ <div class="py red-6">6</div>
702
+ <div class="py red-7">7</div>
703
+ <div class="py red-8">8</div>
704
+ <div class="py red-9">9</div>
705
+ <div class="py red-10">10</div>
706
+ <div class="py red-11">11</div>
707
+ </div>
708
+ <div class="grid-0 cols-12 tac va-c">
709
+ <p class="tal">Orange</p>
710
+ <div class="py orange-1">1</div>
711
+ <div class="py orange-2">2</div>
712
+ <div class="py orange-3">3</div>
713
+ <div class="py orange-4">4</div>
714
+ <div class="py orange-5">5</div>
715
+ <div class="py orange-6">6</div>
716
+ <div class="py orange-7">7</div>
717
+ <div class="py orange-8">8</div>
718
+ <div class="py orange-9">9</div>
719
+ <div class="py orange-10">10</div>
720
+ <div class="py orange-11">11</div>
721
+ </div>
722
+ <div class="grid-0 cols-12 tac va-c">
723
+ <p class="tal">Amber</p>
724
+ <div class="py amber-1">1</div>
725
+ <div class="py amber-2">2</div>
726
+ <div class="py amber-3">3</div>
727
+ <div class="py amber-4">4</div>
728
+ <div class="py amber-5">5</div>
729
+ <div class="py amber-6">6</div>
730
+ <div class="py amber-7">7</div>
731
+ <div class="py amber-8">8</div>
732
+ <div class="py amber-9">9</div>
733
+ <div class="py amber-10">10</div>
734
+ <div class="py amber-11">11</div>
735
+ </div>
736
+ <div class="grid-0 cols-12 tac va-c">
737
+ <p class="tal">Yellow</p>
738
+ <div class="py yellow-1">1</div>
739
+ <div class="py yellow-2">2</div>
740
+ <div class="py yellow-3">3</div>
741
+ <div class="py yellow-4">4</div>
742
+ <div class="py yellow-5">5</div>
743
+ <div class="py yellow-6">6</div>
744
+ <div class="py yellow-7">7</div>
745
+ <div class="py yellow-8">8</div>
746
+ <div class="py yellow-9">9</div>
747
+ <div class="py yellow-10">10</div>
748
+ <div class="py yellow-11">11</div>
749
+ </div>
750
+ <div class="grid-0 cols-12 tac va-c">
751
+ <p class="tal">Lime</p>
752
+ <div class="py lime-1">1</div>
753
+ <div class="py lime-2">2</div>
754
+ <div class="py lime-3">3</div>
755
+ <div class="py lime-4">4</div>
756
+ <div class="py lime-5">5</div>
757
+ <div class="py lime-6">6</div>
758
+ <div class="py lime-7">7</div>
759
+ <div class="py lime-8">8</div>
760
+ <div class="py lime-9">9</div>
761
+ <div class="py lime-10">10</div>
762
+ <div class="py lime-11">11</div>
763
+ </div>
764
+ <div class="grid-0 cols-12 tac va-c">
765
+ <p class="tal">Emerald</p>
766
+ <div class="py emerald-1">1</div>
767
+ <div class="py emerald-2">2</div>
768
+ <div class="py emerald-3">3</div>
769
+ <div class="py emerald-4">4</div>
770
+ <div class="py emerald-5">5</div>
771
+ <div class="py emerald-6">6</div>
772
+ <div class="py emerald-7">7</div>
773
+ <div class="py emerald-8">8</div>
774
+ <div class="py emerald-9">9</div>
775
+ <div class="py emerald-10">10</div>
776
+ <div class="py emerald-11">11</div>
777
+ </div>
778
+ <div class="grid-0 cols-12 tac va-c">
779
+ <p class="tal">Green</p>
780
+ <div class="py green-1">1</div>
781
+ <div class="py green-2">2</div>
782
+ <div class="py green-3">3</div>
783
+ <div class="py green-4">4</div>
784
+ <div class="py green-5">5</div>
785
+ <div class="py green-6">6</div>
786
+ <div class="py green-7">7</div>
787
+ <div class="py green-8">8</div>
788
+ <div class="py green-9">9</div>
789
+ <div class="py green-10">10</div>
790
+ <div class="py green-11">11</div>
791
+ </div>
792
+ <div class="grid-0 cols-12 tac va-c">
793
+ <p class="tal">Teal</p>
794
+ <div class="py teal-1">1</div>
795
+ <div class="py teal-2">2</div>
796
+ <div class="py teal-3">3</div>
797
+ <div class="py teal-4">4</div>
798
+ <div class="py teal-5">5</div>
799
+ <div class="py teal-6">6</div>
800
+ <div class="py teal-7">7</div>
801
+ <div class="py teal-8">8</div>
802
+ <div class="py teal-9">9</div>
803
+ <div class="py teal-10">10</div>
804
+ <div class="py teal-11">11</div>
805
+ </div>
806
+ <div class="grid-0 cols-12 tac va-c">
807
+ <p class="tal">Cyan</p>
808
+ <div class="py cyan-1">1</div>
809
+ <div class="py cyan-2">2</div>
810
+ <div class="py cyan-3">3</div>
811
+ <div class="py cyan-4">4</div>
812
+ <div class="py cyan-5">5</div>
813
+ <div class="py cyan-6">6</div>
814
+ <div class="py cyan-7">7</div>
815
+ <div class="py cyan-8">8</div>
816
+ <div class="py cyan-9">9</div>
817
+ <div class="py cyan-10">10</div>
818
+ <div class="py cyan-11">11</div>
819
+ </div>
820
+ <div class="grid-0 cols-12 tac va-c">
821
+ <p class="tal">Sky</p>
822
+ <div class="py sky-1">1</div>
823
+ <div class="py sky-2">2</div>
824
+ <div class="py sky-3">3</div>
825
+ <div class="py sky-4">4</div>
826
+ <div class="py sky-5">5</div>
827
+ <div class="py sky-6">6</div>
828
+ <div class="py sky-7">7</div>
829
+ <div class="py sky-8">8</div>
830
+ <div class="py sky-9">9</div>
831
+ <div class="py sky-10">10</div>
832
+ <div class="py sky-11">11</div>
833
+ </div>
834
+ <div class="grid-0 cols-12 tac va-c">
835
+ <p class="tal">Blue</p>
836
+ <div class="py blue-1">1</div>
837
+ <div class="py blue-2">2</div>
838
+ <div class="py blue-3">3</div>
839
+ <div class="py blue-4">4</div>
840
+ <div class="py blue-5">5</div>
841
+ <div class="py blue-6">6</div>
842
+ <div class="py blue-7">7</div>
843
+ <div class="py blue-8">8</div>
844
+ <div class="py blue-9">9</div>
845
+ <div class="py blue-10">10</div>
846
+ <div class="py blue-11">11</div>
847
+ </div>
848
+ <div class="grid-0 cols-12 tac va-c">
849
+ <p class="tal">Indigo</p>
850
+ <div class="py indigo-1">1</div>
851
+ <div class="py indigo-2">2</div>
852
+ <div class="py indigo-3">3</div>
853
+ <div class="py indigo-4">4</div>
854
+ <div class="py indigo-5">5</div>
855
+ <div class="py indigo-6">6</div>
856
+ <div class="py indigo-7">7</div>
857
+ <div class="py indigo-8">8</div>
858
+ <div class="py indigo-9">9</div>
859
+ <div class="py indigo-10">10</div>
860
+ <div class="py indigo-11">11</div>
861
+ </div>
862
+ <div class="grid-0 cols-12 tac va-c">
863
+ <p class="tal">Purple</p>
864
+ <div class="py purple-1">1</div>
865
+ <div class="py purple-2">2</div>
866
+ <div class="py purple-3">3</div>
867
+ <div class="py purple-4">4</div>
868
+ <div class="py purple-5">5</div>
869
+ <div class="py purple-6">6</div>
870
+ <div class="py purple-7">7</div>
871
+ <div class="py purple-8">8</div>
872
+ <div class="py purple-9">9</div>
873
+ <div class="py purple-10">10</div>
874
+ <div class="py purple-11">11</div>
875
+ </div>
876
+ <div class="grid-0 cols-12 tac va-c">
877
+ <p class="tal">Fuchsia</p>
878
+ <div class="py fuchsia-1">1</div>
879
+ <div class="py fuchsia-2">2</div>
880
+ <div class="py fuchsia-3">3</div>
881
+ <div class="py fuchsia-4">4</div>
882
+ <div class="py fuchsia-5">5</div>
883
+ <div class="py fuchsia-6">6</div>
884
+ <div class="py fuchsia-7">7</div>
885
+ <div class="py fuchsia-8">8</div>
886
+ <div class="py fuchsia-9">9</div>
887
+ <div class="py fuchsia-10">10</div>
888
+ <div class="py fuchsia-11">11</div>
889
+ </div>
890
+ <div class="grid-0 cols-12 tac va-c">
891
+ <p class="tal">Pink</p>
892
+ <div class="py pink-1">1</div>
893
+ <div class="py pink-2">2</div>
894
+ <div class="py pink-3">3</div>
895
+ <div class="py pink-4">4</div>
896
+ <div class="py pink-5">5</div>
897
+ <div class="py pink-6">6</div>
898
+ <div class="py pink-7">7</div>
899
+ <div class="py pink-8">8</div>
900
+ <div class="py pink-9">9</div>
901
+ <div class="py pink-10">10</div>
902
+ <div class="py pink-11">11</div>
903
+ </div>
904
+ <div class="grid-0 cols-12 tac va-c">
905
+ <p class="tal">Rose</p>
906
+ <div class="py rose-1">1</div>
907
+ <div class="py rose-2">2</div>
908
+ <div class="py rose-3">3</div>
909
+ <div class="py rose-4">4</div>
910
+ <div class="py rose-5">5</div>
911
+ <div class="py rose-6">6</div>
912
+ <div class="py rose-7">7</div>
913
+ <div class="py rose-8">8</div>
914
+ <div class="py rose-9">9</div>
915
+ <div class="py rose-10">10</div>
916
+ <div class="py rose-11">11</div>
917
+ </div>
918
+ </section>
919
+
920
+
921
+ <section id="tailwind-colors">
922
+ <div>
923
+ <div class="grid-0 cols-12 tac va-c">
924
+ <p class="tal">Slate</p>
925
+ <div class="h-4 bg-slate-50 tac">50</div>
926
+ <div class="h-4 bg-slate-100">100</div>
927
+ <div class="h-4 bg-slate-200">200</div>
928
+ <div class="h-4 bg-slate-300">300</div>
929
+ <div class="h-4 bg-slate-400">400</div>
930
+ <div class="h-4 bg-slate-500">500</div>
931
+ <div class="h-4 bg-slate-600">600</div>
932
+ <div class="h-4 bg-slate-700">700</div>
933
+ <div class="h-4 bg-slate-800">800</div>
934
+ <div class="h-4 bg-slate-900">900</div>
935
+ <div class="h-4 bg-slate-950">950</div>
936
+ </div>
937
+ </div>
938
+ <div>
939
+ <div class="grid-0 cols-12 tac va-c">
940
+ <p class="tal">Gray</p>
941
+ <div class="h-4 bg-gray-50">50</div>
942
+ <div class="h-4 bg-gray-100">100</div>
943
+ <div class="h-4 bg-gray-200">200</div>
944
+ <div class="h-4 bg-gray-300">300</div>
945
+ <div class="h-4 bg-gray-400">400</div>
946
+ <div class="h-4 bg-gray-500">500</div>
947
+ <div class="h-4 bg-gray-600">600</div>
948
+ <div class="h-4 bg-gray-700">700</div>
949
+ <div class="h-4 bg-gray-800">800</div>
950
+ <div class="h-4 bg-gray-900">900</div>
951
+ <div class="h-4 bg-gray-950">950</div>
952
+ </div>
953
+ </div>
954
+ <div>
955
+ <div class="grid-0 cols-12 tac va-c">
956
+ <p class="tal">Zinc</p>
957
+ <div class="h-4 bg-zinc-50">50</div>
958
+ <div class="h-4 bg-zinc-100">100</div>
959
+ <div class="h-4 bg-zinc-200">200</div>
960
+ <div class="h-4 bg-zinc-300">300</div>
961
+ <div class="h-4 bg-zinc-400">400</div>
962
+ <div class="h-4 bg-zinc-500">500</div>
963
+ <div class="h-4 bg-zinc-600">600</div>
964
+ <div class="h-4 bg-zinc-700">700</div>
965
+ <div class="h-4 bg-zinc-800">800</div>
966
+ <div class="h-4 bg-zinc-900">900</div>
967
+ <div class="h-4 bg-zinc-950">950</div>
968
+ </div>
969
+ </div>
970
+ <div>
971
+ <div class="grid-0 cols-12 tac va-c">
972
+ <p class="tal">Neutral</p>
973
+ <div class="h-4 bg-neutral-50">50</div>
974
+ <div class="h-4 bg-neutral-100">100</div>
975
+ <div class="h-4 bg-neutral-200">200</div>
976
+ <div class="h-4 bg-neutral-300">300</div>
977
+ <div class="h-4 bg-neutral-400">400</div>
978
+ <div class="h-4 bg-neutral-500">500</div>
979
+ <div class="h-4 bg-neutral-600">600</div>
980
+ <div class="h-4 bg-neutral-700">700</div>
981
+ <div class="h-4 bg-neutral-800">800</div>
982
+ <div class="h-4 bg-neutral-900">900</div>
983
+ <div class="h-4 bg-neutral-950">950</div>
984
+ </div>
985
+ </div>
986
+ <div>
987
+ <div class="grid-0 cols-12 tac va-c">
988
+ <p class="tal">Stone</p>
989
+ <div class="h-4 bg-stone-50">50</div>
990
+ <div class="h-4 bg-stone-100">100</div>
991
+ <div class="h-4 bg-stone-200">200</div>
992
+ <div class="h-4 bg-stone-300">300</div>
993
+ <div class="h-4 bg-stone-400">400</div>
994
+ <div class="h-4 bg-stone-500">500</div>
995
+ <div class="h-4 bg-stone-600">600</div>
996
+ <div class="h-4 bg-stone-700">700</div>
997
+ <div class="h-4 bg-stone-800">800</div>
998
+ <div class="h-4 bg-stone-900">900</div>
999
+ <div class="h-4 bg-stone-950">950</div>
1000
+ </div>
1001
+ </div>
1002
+ <div>
1003
+ <div class="grid-0 cols-12 tac va-c">
1004
+ <p class="tal">Red</p>
1005
+ <div class="h-4 bg-red-50">50</div>
1006
+ <div class="h-4 bg-red-100">100</div>
1007
+ <div class="h-4 bg-red-200">200</div>
1008
+ <div class="h-4 bg-red-300">300</div>
1009
+ <div class="h-4 bg-red-400">400</div>
1010
+ <div class="h-4 bg-red-500">500</div>
1011
+ <div class="h-4 bg-red-600">600</div>
1012
+ <div class="h-4 bg-red-700">700</div>
1013
+ <div class="h-4 bg-red-800">800</div>
1014
+ <div class="h-4 bg-red-900">900</div>
1015
+ <div class="h-4 bg-red-950">950</div>
1016
+ </div>
1017
+ </div>
1018
+ <div>
1019
+ <div class="grid-0 cols-12 tac va-c">
1020
+ <p class="tal">Orange</p>
1021
+ <div class="h-4 bg-orange-50">50</div>
1022
+ <div class="h-4 bg-orange-100">100</div>
1023
+ <div class="h-4 bg-orange-200">200</div>
1024
+ <div class="h-4 bg-orange-300">300</div>
1025
+ <div class="h-4 bg-orange-400">400</div>
1026
+ <div class="h-4 bg-orange-500">500</div>
1027
+ <div class="h-4 bg-orange-600">600</div>
1028
+ <div class="h-4 bg-orange-700">700</div>
1029
+ <div class="h-4 bg-orange-800">800</div>
1030
+ <div class="h-4 bg-orange-900">900</div>
1031
+ <div class="h-4 bg-orange-950">950</div>
1032
+ </div>
1033
+ </div>
1034
+ <div>
1035
+ <div class="grid-0 cols-12 tac va-c">
1036
+ <p class="tal">Amber</p>
1037
+ <div class="h-4 bg-amber-50">50</div>
1038
+ <div class="h-4 bg-amber-100">100</div>
1039
+ <div class="h-4 bg-amber-200">200</div>
1040
+ <div class="h-4 bg-amber-300">300</div>
1041
+ <div class="h-4 bg-amber-400">400</div>
1042
+ <div class="h-4 bg-amber-500">500</div>
1043
+ <div class="h-4 bg-amber-600">600</div>
1044
+ <div class="h-4 bg-amber-700">700</div>
1045
+ <div class="h-4 bg-amber-800">800</div>
1046
+ <div class="h-4 bg-amber-900">900</div>
1047
+ <div class="h-4 bg-amber-950">950</div>
1048
+ </div>
1049
+ </div>
1050
+ <div>
1051
+ <div class="grid-0 cols-12 tac va-c">
1052
+ <p class="tal">Yellow</p>
1053
+ <div class="h-4 bg-yellow-50">50</div>
1054
+ <div class="h-4 bg-yellow-100">100</div>
1055
+ <div class="h-4 bg-yellow-200">200</div>
1056
+ <div class="h-4 bg-yellow-300">300</div>
1057
+ <div class="h-4 bg-yellow-400">400</div>
1058
+ <div class="h-4 bg-yellow-500">500</div>
1059
+ <div class="h-4 bg-yellow-600">600</div>
1060
+ <div class="h-4 bg-yellow-700">700</div>
1061
+ <div class="h-4 bg-yellow-800">800</div>
1062
+ <div class="h-4 bg-yellow-900">900</div>
1063
+ <div class="h-4 bg-yellow-950">950</div>
1064
+ </div>
1065
+ </div>
1066
+ <div>
1067
+ <div class="grid-0 cols-12 tac va-c">
1068
+ <p class="tal">Lime</p>
1069
+ <div class="h-4 bg-lime-50">50</div>
1070
+ <div class="h-4 bg-lime-100">100</div>
1071
+ <div class="h-4 bg-lime-200">200</div>
1072
+ <div class="h-4 bg-lime-300">300</div>
1073
+ <div class="h-4 bg-lime-400">400</div>
1074
+ <div class="h-4 bg-lime-500">500</div>
1075
+ <div class="h-4 bg-lime-600">600</div>
1076
+ <div class="h-4 bg-lime-700">700</div>
1077
+ <div class="h-4 bg-lime-800">800</div>
1078
+ <div class="h-4 bg-lime-900">900</div>
1079
+ <div class="h-4 bg-lime-950">950</div>
1080
+ </div>
1081
+ </div>
1082
+ <div>
1083
+ <div class="grid-0 cols-12 tac va-c">
1084
+ <p class="tal">Green</p>
1085
+ <div class="h-4 bg-green-50">50</div>
1086
+ <div class="h-4 bg-green-100">100</div>
1087
+ <div class="h-4 bg-green-200">200</div>
1088
+ <div class="h-4 bg-green-300">300</div>
1089
+ <div class="h-4 bg-green-400">400</div>
1090
+ <div class="h-4 bg-green-500">500</div>
1091
+ <div class="h-4 bg-green-600">600</div>
1092
+ <div class="h-4 bg-green-700">700</div>
1093
+ <div class="h-4 bg-green-800">800</div>
1094
+ <div class="h-4 bg-green-900">900</div>
1095
+ <div class="h-4 bg-green-950">950</div>
1096
+ </div>
1097
+ </div>
1098
+ <div>
1099
+ <div class="grid-0 cols-12 tac va-c">
1100
+ <p class="tal">Emerald</p>
1101
+ <div class="h-4 bg-emerald-50">50</div>
1102
+ <div class="h-4 bg-emerald-100">100</div>
1103
+ <div class="h-4 bg-emerald-200">200</div>
1104
+ <div class="h-4 bg-emerald-300">300</div>
1105
+ <div class="h-4 bg-emerald-400">400</div>
1106
+ <div class="h-4 bg-emerald-500">500</div>
1107
+ <div class="h-4 bg-emerald-600">600</div>
1108
+ <div class="h-4 bg-emerald-700">700</div>
1109
+ <div class="h-4 bg-emerald-800">800</div>
1110
+ <div class="h-4 bg-emerald-900">900</div>
1111
+ <div class="h-4 bg-emerald-950">950</div>
1112
+ </div>
1113
+ </div>
1114
+ <div>
1115
+ <div class="grid-0 cols-12 tac va-c">
1116
+ <p class="tal">Teal</p>
1117
+ <div class="h-4 bg-teal-50">50</div>
1118
+ <div class="h-4 bg-teal-100">100</div>
1119
+ <div class="h-4 bg-teal-200">200</div>
1120
+ <div class="h-4 bg-teal-300">300</div>
1121
+ <div class="h-4 bg-teal-400">400</div>
1122
+ <div class="h-4 bg-teal-500">500</div>
1123
+ <div class="h-4 bg-teal-600">600</div>
1124
+ <div class="h-4 bg-teal-700">700</div>
1125
+ <div class="h-4 bg-teal-800">800</div>
1126
+ <div class="h-4 bg-teal-900">900</div>
1127
+ <div class="h-4 bg-teal-950">950</div>
1128
+ </div>
1129
+ </div>
1130
+ <div>
1131
+ <div class="grid-0 cols-12 tac va-c">
1132
+ <p class="tal">Cyan</p>
1133
+ <div class="h-4 bg-cyan-50">50</div>
1134
+ <div class="h-4 bg-cyan-100">100</div>
1135
+ <div class="h-4 bg-cyan-200">200</div>
1136
+ <div class="h-4 bg-cyan-300">300</div>
1137
+ <div class="h-4 bg-cyan-400">400</div>
1138
+ <div class="h-4 bg-cyan-500">500</div>
1139
+ <div class="h-4 bg-cyan-600">600</div>
1140
+ <div class="h-4 bg-cyan-700">700</div>
1141
+ <div class="h-4 bg-cyan-800">800</div>
1142
+ <div class="h-4 bg-cyan-900">900</div>
1143
+ <div class="h-4 bg-cyan-950">950</div>
1144
+ </div>
1145
+ </div>
1146
+ <div>
1147
+ <div class="grid-0 cols-12 tac va-c">
1148
+ <p class="tal">Sky</p>
1149
+ <div class="h-4 bg-sky-50">50</div>
1150
+ <div class="h-4 bg-sky-100">100</div>
1151
+ <div class="h-4 bg-sky-200">200</div>
1152
+ <div class="h-4 bg-sky-300">300</div>
1153
+ <div class="h-4 bg-sky-400">400</div>
1154
+ <div class="h-4 bg-sky-500">500</div>
1155
+ <div class="h-4 bg-sky-600">600</div>
1156
+ <div class="h-4 bg-sky-700">700</div>
1157
+ <div class="h-4 bg-sky-800">800</div>
1158
+ <div class="h-4 bg-sky-900">900</div>
1159
+ <div class="h-4 bg-sky-950">950</div>
1160
+ </div>
1161
+ </div>
1162
+ <div>
1163
+ <div class="grid-0 cols-12 tac va-c">
1164
+ <p class="tal">Blue</p>
1165
+ <div class="h-4 bg-blue-50">50</div>
1166
+ <div class="h-4 bg-blue-100">100</div>
1167
+ <div class="h-4 bg-blue-200">200</div>
1168
+ <div class="h-4 bg-blue-300">300</div>
1169
+ <div class="h-4 bg-blue-400">400</div>
1170
+ <div class="h-4 bg-blue-500">500</div>
1171
+ <div class="h-4 bg-blue-600">600</div>
1172
+ <div class="h-4 bg-blue-700">700</div>
1173
+ <div class="h-4 bg-blue-800">800</div>
1174
+ <div class="h-4 bg-blue-900">900</div>
1175
+ <div class="h-4 bg-blue-950">950</div>
1176
+ </div>
1177
+ </div>
1178
+ <div>
1179
+ <div class="grid-0 cols-12 tac va-c">
1180
+ <p class="tal">Indigo</p>
1181
+ <div class="h-4 bg-indigo-50">50</div>
1182
+ <div class="h-4 bg-indigo-100">100</div>
1183
+ <div class="h-4 bg-indigo-200">200</div>
1184
+ <div class="h-4 bg-indigo-300">300</div>
1185
+ <div class="h-4 bg-indigo-400">400</div>
1186
+ <div class="h-4 bg-indigo-500">500</div>
1187
+ <div class="h-4 bg-indigo-600">600</div>
1188
+ <div class="h-4 bg-indigo-700">700</div>
1189
+ <div class="h-4 bg-indigo-800">800</div>
1190
+ <div class="h-4 bg-indigo-900">900</div>
1191
+ <div class="h-4 bg-indigo-950">950</div>
1192
+ </div>
1193
+ </div>
1194
+ <div>
1195
+ <div class="grid-0 cols-12 tac va-c">
1196
+ <p class="tal">Violet</p>
1197
+ <div class="h-4 bg-violet-50">50</div>
1198
+ <div class="h-4 bg-violet-100">100</div>
1199
+ <div class="h-4 bg-violet-200">200</div>
1200
+ <div class="h-4 bg-violet-300">300</div>
1201
+ <div class="h-4 bg-violet-400">400</div>
1202
+ <div class="h-4 bg-violet-500">500</div>
1203
+ <div class="h-4 bg-violet-600">600</div>
1204
+ <div class="h-4 bg-violet-700">700</div>
1205
+ <div class="h-4 bg-violet-800">800</div>
1206
+ <div class="h-4 bg-violet-900">900</div>
1207
+ <div class="h-4 bg-violet-950">950</div>
1208
+ </div>
1209
+ </div>
1210
+ <div>
1211
+ <div class="grid-0 cols-12 tac va-c">
1212
+ <p class="tal">Purple</p>
1213
+ <div class="h-4 bg-purple-50">50</div>
1214
+ <div class="h-4 bg-purple-100">100</div>
1215
+ <div class="h-4 bg-purple-200">200</div>
1216
+ <div class="h-4 bg-purple-300">300</div>
1217
+ <div class="h-4 bg-purple-400">400</div>
1218
+ <div class="h-4 bg-purple-500">500</div>
1219
+ <div class="h-4 bg-purple-600">600</div>
1220
+ <div class="h-4 bg-purple-700">700</div>
1221
+ <div class="h-4 bg-purple-800">800</div>
1222
+ <div class="h-4 bg-purple-900">900</div>
1223
+ <div class="h-4 bg-purple-950">950</div>
1224
+ </div>
1225
+ </div>
1226
+ <div>
1227
+ <div class="grid-0 cols-12 tac va-c">
1228
+ <p class="tal">Fuchsia</p>
1229
+ <div class="h-4 bg-fuchsia-50">50</div>
1230
+ <div class="h-4 bg-fuchsia-100">100</div>
1231
+ <div class="h-4 bg-fuchsia-200">200</div>
1232
+ <div class="h-4 bg-fuchsia-300">300</div>
1233
+ <div class="h-4 bg-fuchsia-400">400</div>
1234
+ <div class="h-4 bg-fuchsia-500">500</div>
1235
+ <div class="h-4 bg-fuchsia-600">600</div>
1236
+ <div class="h-4 bg-fuchsia-700">700</div>
1237
+ <div class="h-4 bg-fuchsia-800">800</div>
1238
+ <div class="h-4 bg-fuchsia-900">900</div>
1239
+ <div class="h-4 bg-fuchsia-950">950</div>
1240
+ </div>
1241
+ </div>
1242
+ <div>
1243
+ <div class="grid-0 cols-12 tac va-c">
1244
+ <p class="tal">Pink</p>
1245
+ <div class="h-4 bg-pink-50">50</div>
1246
+ <div class="h-4 bg-pink-100">100</div>
1247
+ <div class="h-4 bg-pink-200">200</div>
1248
+ <div class="h-4 bg-pink-300">300</div>
1249
+ <div class="h-4 bg-pink-400">400</div>
1250
+ <div class="h-4 bg-pink-500">500</div>
1251
+ <div class="h-4 bg-pink-600">600</div>
1252
+ <div class="h-4 bg-pink-700">700</div>
1253
+ <div class="h-4 bg-pink-800">800</div>
1254
+ <div class="h-4 bg-pink-900">900</div>
1255
+ <div class="h-4 bg-pink-950">950</div>
1256
+ </div>
1257
+ </div>
1258
+ <div>
1259
+ <div class="grid-0 cols-12 tac va-c">
1260
+ <p class="tal">Rose</p>
1261
+ <div class="h-4 bg-rose-50">50</div>
1262
+ <div class="h-4 bg-rose-100">100</div>
1263
+ <div class="h-4 bg-rose-200">200</div>
1264
+ <div class="h-4 bg-rose-300">300</div>
1265
+ <div class="h-4 bg-rose-400">400</div>
1266
+ <div class="h-4 bg-rose-500">500</div>
1267
+ <div class="h-4 bg-rose-600">600</div>
1268
+ <div class="h-4 bg-rose-700">700</div>
1269
+ <div class="h-4 bg-rose-800">800</div>
1270
+ <div class="h-4 bg-rose-900">900</div>
1271
+ <div class="h-4 bg-rose-950">950</div>
1272
+ </div>
1273
+ </div>
1274
+ </section>
1275
+
56
1276
  </div>
57
1277
 
58
1278
  <div id="app"></div>