nk_jtb 0.16.0 → 0.17.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.
Files changed (17) hide show
  1. package/index.html +2125 -2009
  2. package/package.json +1 -1
  3. package/src/base/_base.scss +2 -1
  4. package/src/base/_content_gap.scss +6 -5
  5. package/src/base/_typography.scss +5 -5
  6. package/src/components/_menu.scss +6 -6
  7. package/src/extras/_nk-docs.scss +5 -5
  8. package/src/forms/_form.scss +22 -36
  9. package/src/maps_and_variables/_base.scss +5 -3
  10. package/src/maps_and_variables/_components.scss +1 -1
  11. package/src/maps_and_variables/_utility-maps.scss +6 -47
  12. package/src/maps_and_variables/_values-variants-and-properties.scss +50 -0
  13. package/src/maps_and_variables/index.scss +4 -1
  14. package/src/utilities/_margin.scss +10 -10
  15. package/src/utilities/_padding.scss +4 -5
  16. package/src/utilities/_sizing.scss +7 -3
  17. package/tmp427/_hero.scss +2 -2
package/index.html CHANGED
@@ -10,289 +10,525 @@
10
10
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
11
11
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
12
12
  </head>
13
- <!--
14
- <section id="table" class="py-3">
15
- <div class="container">
16
- <h2 class="title txt-3">Tables</h2>
17
-
18
- </div>
19
- </section>
20
- -->
21
13
 
22
14
  <body class="zebra c-py-5-3-2">
23
- <!-- structure -->
24
15
 
25
-
26
- <section id="navbar">
16
+ <section id="form-controls" class="py-3">
27
17
  <div class="container">
28
- <div class="navbar bdr-amber bdr-5">
29
- <div class="pxy-025 bdr bdr-2">
30
- LOGO
31
- </div>
32
- <div class="bdr flex">
33
- <div class="pxy-025 bdr bdr-2">
34
- NAV
18
+ <div class="txt-red txt-4">moved to JTB docs</div>
19
+ <h2 class="title txt-3">Form Controls</h2>
20
+ <div class="grid cols-2">
21
+ <div id="radio-check-toggle">
22
+ <h5>Radio</h5>
23
+ <div class="space-x">
24
+ <label><input type="radio" name="abc">Option</label>
25
+ <label><input type="radio" name="abc" checked>Checked</label>
26
+ <label><input type="radio" name="abc" disabled>Disabled</label>
35
27
  </div>
36
- <div class="pxy-025 bdr bdr-2">
37
- LOGIN
28
+ <h5>Checkbox</h5>
29
+ <div class="space-x">
30
+ <label><input type="checkbox">Option</label>
31
+ <label><input type="checkbox" checked>Checked</label>
32
+ <label><input type="checkbox" disabled>Disabled</label>
38
33
  </div>
39
- </div>
40
- </div>
41
- <hr>
42
- <div class="navbar bdr-amber bdr-5">
43
- <a href="/" aria-label="Home">
44
- <img src="/images/logo.svg" alt="NayKel JTB logo" loading="lazy" />
45
- </a>
46
- <div class="bdr flex va-c space-x-3">
47
- <div class="flex va-c">
48
- <nav>
49
- <ul>
50
- <li><a class="active" href="#">Home</a></li>
51
- <li class="relative" x-data="{ show: false }" x-on:mouseenter="show=true" x-on:mouseleave="show=false">
52
- <a class="w-full inline-flex va-b">
53
- Courses
54
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
55
- <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
56
- </svg>
57
- </a>
58
- <div class="absolute mt-05 flex w-10 z-100" x-show="show"
59
- x-transition.duration.200ms style="display: none;">
60
- <ul class="menu bx pxy-0 w-full">
61
- <li><a href="#">Graphic Design</a></li>
62
- <li><a href="#">Digital Marketing</a></li>
63
- <li><a href="#">Mobile App Development</a></li>
64
- <li><a href="#">IT Consulting</a></li>
65
- </ul>
66
- </div>
67
- </li>
68
- <li><a href="#">About</a></li>
69
- <li><a href="#">Contact</a></li>
70
- </ul>
71
- </nav>
34
+ <h5>Slider</h5>
35
+ <div class="space-x">
36
+ <label class="toggle">
37
+ <input type="checkbox">
38
+ <div class="slider"></div>
39
+ <span>Option</span>
40
+ </label>
41
+ <label class="toggle">
42
+ <input type="checkbox" checked>
43
+ <div class="slider"></div>
44
+ <span>Checked</span>
45
+ </label>
46
+ <label class="toggle">
47
+ <input type="checkbox" disabled>
48
+ <div class="slider"></div>
49
+ <span>Disabled</span>
50
+ </label>
72
51
  </div>
73
- <div>
74
- <button class="btn">Sign in</button>
75
- <button class="btn primary">Sign up</button>
52
+ </div>
53
+ <div id="label-with-tooltip">
54
+ <h5 class="my">Label with Tooltip</h5>
55
+ <div class="flex va-c space-between mb-05 bdr">
56
+ <label> My Label </label>
57
+ <span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
58
+ x-on:mouseleave="open=false">
59
+ <div class="flex va-c">
60
+ <svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
61
+ fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
62
+ aria-hidden="true" data-slot="icon">
63
+ <path stroke-linecap="round" stroke-linejoin="round"
64
+ d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z">
65
+ </path>
66
+ </svg>
67
+ </div>
68
+ <div class="absolute right-0 minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
69
+ x-show="open" x-transition.duration="" style="display: none;">
70
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
71
+ perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
72
+ aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
73
+ </div>
74
+ </span>
76
75
  </div>
77
76
  </div>
78
77
  </div>
79
- </div>
80
- </section>
81
- <section id="typography">
82
- <div class="container">
83
- <h2 class="title mb-3">Typography</h2>
84
- <div class="grid-3 cols-2">
85
- <div id="headings">
86
- <h1>Heading 1</h1>
87
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
88
- soluta harum beatae qui reiciendis possimus molestiae?</p>
89
- <h2>Heading 2</h2>
90
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
91
- soluta harum beatae qui reiciendis possimus molestiae?</p>
92
- <h3>Heading 3</h3>
93
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
94
- soluta harum beatae qui reiciendis possimus molestiae?</p>
95
- <h4>Heading 4</h4>
96
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
97
- soluta harum beatae qui reiciendis possimus molestiae?</p>
98
- <h5>Heading 5</h5>
99
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
100
- soluta harum beatae qui reiciendis possimus molestiae?</p>
101
- <h6>Heading 6</h6>
102
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
103
- soluta harum beatae qui reiciendis possimus molestiae?</p>
78
+ <div id="file-input">
79
+ <div class="my">
80
+ <input type="file" name="name">
81
+ <!-- <button type="submit" class="btn">Upload</button> -->
82
+ <input type="text">
104
83
  </div>
84
+ <hr>
85
+ <label class="file">
86
+ <input type="file" name="name">
87
+ <span> Select file... </span>
88
+ </label>
105
89
  <div>
106
- <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
107
- quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
108
- numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
109
-
110
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
111
- laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
112
- architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
113
- quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
114
- ipsam!</p>
115
-
116
- <h3 class="title">Text Sizes</h3>
117
- <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
118
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
119
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
120
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
121
- <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
122
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
123
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
124
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
125
- <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
126
- delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
127
- exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
128
- deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
129
- <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
130
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
131
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
132
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
133
- <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
134
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
135
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
136
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
90
+ <label class="file bdr">
91
+ <input type="file" name="file">
92
+ <span>Choose a file…</span>
93
+ </label>
94
+ <div class="frm-row">
95
+ <label class="file btn">
96
+ <input type="file" name="">
97
+ <svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
98
+ viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
99
+ <path fill-rule="evenodd"
100
+ d="M11.47 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06l-3.22-3.22V16.5a.75.75 0 0 1-1.5 0V4.81L8.03 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5ZM3 15.75a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
101
+ clip-rule="evenodd" />
102
+ </svg>
103
+ <span>Choose a file...</span>
104
+ </label>
105
+ </div>
106
+ </div>
107
+ <div class="frm-row">
108
+ <label for="success" class="txt-success-light">Your name</label>
109
+ <input type="text" id="success" class="success-light" placeholder="Success input">
110
+ <p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
111
+ message.</p>
112
+ </div>
113
+ <div class="frm-row">
114
+ <label for="error" class="block mb-2 text-sm text-red-700 dark:text-red-500">Your
115
+ name</label>
116
+ <input type="text" id="error"
117
+ class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500"
118
+ placeholder="Error input">
119
+ <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
120
+ snapp!</span> Some error message.</p>
121
+ </div>
122
+ <div class="frm-row">
123
+ <div class="withAddons">
124
+ <input type="text">
125
+ <div class="trailingAddon"> Trailing </div>
126
+ <div class="leadingAddon"> Leading </div>
127
+ </div>
128
+ </div>
129
+ <div class="frm-row">
130
+ <div class="withAddons">
131
+ <div class="leadingAddon"> Leading </div>
132
+ <div class="trailingAddon"> Trailing </div>
133
+ <input type="text">
134
+ </div>
137
135
  </div>
138
136
  </div>
139
137
  </div>
140
138
  </section>
141
139
 
140
+ <div class="pxy-5">
141
+
142
+ <div class="relative">
143
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
144
+ <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
145
+ <path d="M10 2a8 8 0 100 16 8 8 0 000-16z" />
146
+ </svg>
147
+ </div>
148
+ <input
149
+ type="text"
150
+ class="pl-10 border border-gray-300 rounded"
151
+ placeholder="Enter something">
152
+ </div>
153
+
142
154
 
155
+ <form>
156
+ <label for="email-address-icon" class="block">Your Email</label>
157
+ <div class="relative">
158
+ <div class="absolute inset-y-0 start-0 flex items-center ps-3.5">
159
+ <svg class="txt-green" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
160
+ <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
161
+ <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
162
+ </svg>
163
+ </div>
164
+ <input type="text" id="email-address-icon" class="block w-full ps-10 p-2.5" placeholder="email@example.com.au">
165
+ </div>
166
+ </form>
167
+
168
+ <!--
169
+ <form class="max-w-sm mx-auto">
170
+ <div class="mb-5">
171
+ <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
172
+ <input type="email" id="email" 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" placeholder="name@flowbite.com" required />
173
+ </div>
174
+ <div class="mb-5">
175
+ <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
176
+ <input type="password" id="password" 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" required />
177
+ </div>
178
+ <div class="flex items-start mb-5">
179
+ <div class="flex items-center h-5">
180
+ <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
181
+ </div>
182
+ <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
183
+ </div>
184
+ <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
185
+ </form>
143
186
 
187
+ <div class="bdr">
188
+ <div>
189
+ <label for="input-group-1" class="block">Your Email</label>
190
+ <div class="relative">
191
+ <div class="absolute inset-y-0 start-0 flex items-center">
192
+ <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
193
+ <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
194
+ <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
195
+ </svg>
196
+ </div>
197
+ <input type="text" id="input-group-1" 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 ps-10 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" placeholder="name@flowbite.com">
198
+ </div>
199
+ </div>
200
+
201
+ <div>
202
+ <label for="website-admin" class="block">Username</label>
203
+ <div class="flex">
204
+ <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
205
+ <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
206
+ <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
207
+ </svg>
208
+ </span>
209
+ <input type="text" id="website-admin" class="rounded-none rounded-e-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 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" placeholder="elonmusk">
210
+ </div>
211
+ </div>
144
212
 
213
+ </div>
145
214
 
146
215
 
147
- <div class="container pxy bdr">
148
- <div class="bx">
149
- <button class="btn secondary">Secondary Button</button>
150
- <button class="btn primary">Primary Button</button>
216
+ <form class="max-w-sm mx-auto">
217
+ <label for="countries_multiple" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select an option</label>
218
+ <select multiple id="countries_multiple" 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">
219
+ <option selected>Choose countries</option>
220
+ <option value="US">United States</option>
221
+ <option value="CA">Canada</option>
222
+ <option value="FR">France</option>
223
+ <option value="DE">Germany</option>
224
+ </select>
225
+ </form>
226
+
227
+ <form class="max-w-sm mx-auto">
228
+ <div class="flex-col">
229
+
230
+ <select
231
+ id="countries"
232
+ multiple
233
+ class="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">
234
+ <option value="US">United States</option>
235
+ <option value="CA">Canada</option>
236
+ <option value="FR">France</option>
237
+ <option value="DE">Germany</option>
238
+ </select>
239
+ </div>
240
+ </form>
241
+ <div class="flex-col h-auto">
242
+ <select name="cars" id="cars" class="fs0" multiple size="4">
243
+ <option value="volvo">Volvo</option>
244
+ <option value="saab">Saab</option>
245
+ <option value="opel">Opel</option>
246
+ <option value="audi">Audi</option>
247
+ </select>
151
248
  </div>
152
249
  </div>
153
250
 
251
+ <select name="selectedCourses" id="selectedCourses" wire:model.live="selectedCourses" multiple>
252
+ <option value="15">BBB01 Back to Basics Breastfeeding</option>
253
+ <option value="17">ELC01 The Ethical IBCLC: Principles and Responsibilities</option>
254
+ <option value="19">ELC02 Code Compliance: Everyone's Responsibility</option>
255
+ <option value="2">EP01 Breastfeeding: An Essential Health Issue</option>
256
+ <option value="3">EP02 Foundational Governing Principles</option>
257
+ </select> -->
258
+ <div class="container-sm pxy">
259
+
260
+
261
+
262
+ <form>
263
+ <div class="frm-row" for="selectedCourses">
264
+ <div class="flex-col w-full my-0">
265
+ <select name="selectedCourses" id="selectedCourses" wire:model.live="selectedCourses" multiple>
266
+ <option value="15">BBB01 Back to Basics Breastfeeding</option>
267
+ <option value="17">ELC01 The Ethical IBCLC: Principles and Responsibilities</option>
268
+ <option value="19">ELC02 Code Compliance: Everyone's Responsibility</option>
269
+ <option value="2">EP01 Breastfeeding: An Essential Health Issue</option>
270
+ <option value="3">EP02 Foundational Governing Principles</option>
271
+ </select>
272
+ </div>
273
+ </div>
274
+ <p class="mt-025"><small>** Hold the CTRL key to select multiple courses</small></p>
275
+ <div class="tar">
276
+ <button type="button" class="btn" wire:click="$toggle('showModal')" text="cancel"> cancel </button>
277
+ <button type="button" class="btn primary" wire:click="enrol" text="enrol"> enrol </button>
278
+ </div>
279
+ </form>
280
+ </div>
281
+ <!-- structure -->
154
282
 
155
283
 
156
- <!-- dev area -->
157
- <div class="container py">
158
- <blockquote class="border-l-4 border-gray-500 italic">
159
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
160
- <cite class="block tar txt-gray-600">- John Doe</cite>
161
- </blockquote>
162
- <hr>
163
- Clickable table header are buttons inside <code>th</code>
164
- <table>
165
- <thead class="bg-gray-100 bdr-b">
166
- <tr>
167
- <!-- use flex to control alignment -->
168
- <!-- -->
169
- <th class="bdr bdr-red ">
170
- <button class="bdr bdr-green flex w-full ha-c">
171
- <span>TITLE</span>
172
- <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
173
- <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
174
- </svg>
175
- </button>
176
- </th>
177
- <!-- or just add text alignment classes to the `th` -->
178
- <th class="bdr bdr-green tac">
179
- <button class="bdr bdr-red w-full">
180
- <span>TITLE</span>
181
- <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
182
- <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
183
- </svg>
184
- </button>
185
- </th>
186
- </tr>
187
- </thead>
188
- </table>
189
- </div>
190
- <main class="main-content-quick-hide-wrapper zebra">
191
- <!-- basic theme examples -->
192
- <section id="basic-themes" class="py-3">
284
+ <section id="navbar">
193
285
  <div class="container">
194
- <h2 class="title txt-3">Basic Themes</h2>
195
- <h4>Base Colors</h4>
196
- <p class="txt-red"><strong>Note:</strong> The border width has been increased in these examples for better visibility.</p>
197
- <div class="grid gap-05 cols-6">
198
- <div class="bdr-5 primary pxy">primary</div>
199
- <div class="bdr-5 secondary pxy">secondary</div>
200
- <div class="bdr-5 accent pxy">accent</div>
201
- <div class="bdr-5 light pxy">light</div>
202
- <div class="bdr-5 dark pxy">dark</div>
203
- <div class="bdr-5 danger pxy">danger</div>
204
- <div class="bdr-5 info pxy">info</div>
205
- <div class="bdr-5 success pxy">success</div>
206
- <div class="bdr-5 warning pxy">warning</div>
207
- <div class="bdr-5 muted pxy">muted</div>
208
- <div class="bdr-5 stone pxy">stone</div>
209
- <div class="bdr-5 brown pxy">brown</div>
210
- <div class="bdr-5 red pxy">red</div>
211
- <div class="bdr-5 orange pxy">orange</div>
212
- <div class="bdr-5 amber pxy">amber</div>
213
- <div class="bdr-5 yellow pxy">yellow</div>
214
- <div class="bdr-5 lime pxy">lime</div>
215
- <div class="bdr-5 emerald pxy">emerald</div>
216
- <div class="bdr-5 green pxy">green</div>
217
- <div class="bdr-5 teal pxy">teal</div>
218
- <div class="bdr-5 cyan pxy">cyan</div>
219
- <div class="bdr-5 sky pxy">sky</div>
220
- <div class="bdr-5 blue pxy">blue</div>
221
- <div class="bdr-5 indigo pxy">indigo</div>
222
- <div class="bdr-5 purple pxy">purple</div>
223
- <div class="bdr-5 fuchsia pxy">fuchsia</div>
224
- <div class="bdr-5 pink pxy">pink</div>
225
- <div class="bdr-5 rose pxy">rose</div>
226
- <div class="bdr-5 white pxy">white</div>
286
+ <div class="navbar bdr-amber bdr-5">
287
+ <div class="pxy-025 bdr bdr-2">
288
+ LOGO
289
+ </div>
290
+ <div class="bdr flex">
291
+ <div class="pxy-025 bdr bdr-2">
292
+ NAV
293
+ </div>
294
+ <div class="pxy-025 bdr bdr-2">
295
+ LOGIN
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <hr>
300
+ <div class="navbar bdr-amber bdr-5">
301
+ <a href="/" aria-label="Home">
302
+ <img src="/images/logo.svg" alt="NayKel JTB logo" loading="lazy" />
303
+ </a>
304
+ <div class="bdr flex va-c space-x-3">
305
+ <div class="flex va-c">
306
+ <nav>
307
+ <ul>
308
+ <li><a class="active" href="#">Home</a></li>
309
+ <li class="relative" x-data="{ show: false }" x-on:mouseenter="show=true" x-on:mouseleave="show=false">
310
+ <a class="w-full inline-flex va-b">
311
+ Courses
312
+ <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
313
+ <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
314
+ </svg>
315
+ </a>
316
+ <div class="absolute mt-05 flex w-10 z-100" x-show="show"
317
+ x-transition.duration.200ms style="display: none;">
318
+ <ul class="menu bx pxy-0 w-full">
319
+ <li><a href="#">Graphic Design</a></li>
320
+ <li><a href="#">Digital Marketing</a></li>
321
+ <li><a href="#">Mobile App Development</a></li>
322
+ <li><a href="#">IT Consulting</a></li>
323
+ </ul>
324
+ </div>
325
+ </li>
326
+ <li><a href="#">About</a></li>
327
+ <li><a href="#">Contact</a></li>
328
+ </ul>
329
+ </nav>
330
+ </div>
331
+ <div>
332
+ <button class="btn">Sign in</button>
333
+ <button class="btn primary">Sign up</button>
334
+ </div>
335
+ </div>
227
336
  </div>
228
337
  </div>
229
338
  </section>
230
- <!-- table and components -->
231
- <section id="table" class="py-3">
339
+ <section id="typography">
232
340
  <div class="container">
233
- <h2 class="title txt-3">Tables</h2>
234
- <!-- base table -->
235
- <table>
236
- <thead>
237
- <tr>
238
- <th>Product</th>
239
- <th>Description</th>
240
- <th>Price</th>
241
- <th>Stock</th>
242
- </tr>
243
- </thead>
244
- <tbody>
245
- <tr>
246
- <td>Wireless Mouse</td>
247
- <td>Ergonomic mouse with USB receiver</td>
248
- <td>$29.95</td>
249
- <td>54</td>
250
- </tr>
251
- <tr>
252
- <td>Keyboard</td>
253
- <td>Compact mechanical keyboard</td>
254
- <td>$69.00</td>
255
- <td>21</td>
256
- </tr>
257
- <tr>
258
- <td>Monitor</td>
259
- <td>24" 1080p IPS display</td>
260
- <td>$189.50</td>
261
- <td>12</td>
262
- </tr>
263
- </tbody>
264
- </table>
265
- <hr class="bdr-secondary">
341
+ <h2 class="title mb-3">Typography</h2>
342
+ <div class="grid-3 cols-2">
343
+ <div id="headings">
344
+ <h1>Heading 1</h1>
345
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
346
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
347
+ <h2>Heading 2</h2>
348
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
349
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
350
+ <h3>Heading 3</h3>
351
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
352
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
353
+ <h4>Heading 4</h4>
354
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
355
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
356
+ <h5>Heading 5</h5>
357
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
358
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
359
+ <h6>Heading 6</h6>
360
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
361
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
362
+ </div>
363
+ <div>
364
+ <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
365
+ quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
366
+ numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
367
+
368
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
369
+ laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
370
+ architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
371
+ quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
372
+ ipsam!</p>
373
+
374
+ <h3 class="title">Text Sizes</h3>
375
+ <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
376
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
377
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
378
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
379
+ <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
380
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
381
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
382
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
383
+ <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
384
+ delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
385
+ exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
386
+ deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
387
+ <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
388
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
389
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
390
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
391
+ <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
392
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
393
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
394
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </section>
399
+
400
+
401
+
266
402
 
267
403
 
268
404
 
405
+ <div class="container pxy bdr">
406
+ <div class="bx">
407
+ <button class="btn secondary">Secondary Button</button>
408
+ <button class="btn primary">Primary Button</button>
409
+ </div>
410
+ </div>
411
+
412
+
269
413
 
270
- <!-- When using sortable tables, you need to apply some additional styles as they are buttons -->
271
- <table class="w-20">
414
+ <!-- dev area -->
415
+ <div class="container py">
416
+ <blockquote class="border-l-4 border-gray-500 italic">
417
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
418
+ <cite class="block tar txt-gray-600">- John Doe</cite>
419
+ </blockquote>
420
+ <hr>
421
+ Clickable table header are buttons inside <code>th</code>
422
+ <table>
423
+ <thead class="bg-gray-100 bdr-b">
272
424
  <tr>
273
- <th class="bdr bdr-red tac">
274
- <button class="btn">
275
- <span>Product</span>
425
+ <!-- use flex to control alignment -->
426
+ <!-- -->
427
+ <th class="bdr bdr-red ">
428
+ <button class="bdr bdr-green flex w-full ha-c">
429
+ <span>TITLE</span>
430
+ <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
431
+ <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
432
+ </svg>
433
+ </button>
434
+ </th>
435
+ <!-- or just add text alignment classes to the `th` -->
436
+ <th class="bdr bdr-green tac">
437
+ <button class="bdr bdr-red w-full">
438
+ <span>TITLE</span>
276
439
  <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
277
440
  <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
278
441
  </svg>
279
442
  </button>
280
443
  </th>
281
444
  </tr>
282
- </table>
283
- <svg class="wh-1 txt-muted" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
284
- <path d="m7.191 20.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H1.715c-.39 0-.715.406-.715.91 0 .244.081.471.211.634l4.973 6.321c.13.163.308.26.503.26.196 0 .358-.098.504-.26ZM6.184 2.26 1.21 8.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L7.19 2.26A.647.647 0 0 0 6.688 2c-.196 0-.358.098-.504.26Z" />
285
- </svg>
286
- <svg class="wh-1 txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
287
- <path d="M11.184 8.26 6.21 14.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L12.19 8.26a.647.647 0 0 0-.504-.26c-.194 0-.357.098-.503.26Z" />
288
- </svg>
289
- <svg class="wh-1 txt-purple" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
290
- <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z" />
291
- </svg>
292
- <table>
293
- <thead>
445
+ </thead>
446
+ </table>
447
+ </div>
448
+ <main class="main-content-quick-hide-wrapper zebra">
449
+ <!-- basic theme examples -->
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>
488
+ <!-- table and components -->
489
+ <section id="table" class="py-3">
490
+ <div class="container">
491
+ <h2 class="title txt-3">Tables</h2>
492
+ <!-- base table -->
493
+ <table>
494
+ <thead>
495
+ <tr>
496
+ <th>Product</th>
497
+ <th>Description</th>
498
+ <th>Price</th>
499
+ <th>Stock</th>
500
+ </tr>
501
+ </thead>
502
+ <tbody>
503
+ <tr>
504
+ <td>Wireless Mouse</td>
505
+ <td>Ergonomic mouse with USB receiver</td>
506
+ <td>$29.95</td>
507
+ <td>54</td>
508
+ </tr>
509
+ <tr>
510
+ <td>Keyboard</td>
511
+ <td>Compact mechanical keyboard</td>
512
+ <td>$69.00</td>
513
+ <td>21</td>
514
+ </tr>
515
+ <tr>
516
+ <td>Monitor</td>
517
+ <td>24" 1080p IPS display</td>
518
+ <td>$189.50</td>
519
+ <td>12</td>
520
+ </tr>
521
+ </tbody>
522
+ </table>
523
+ <hr class="bdr-secondary">
524
+
525
+
526
+
527
+
528
+ <!-- When using sortable tables, you need to apply some additional styles as they are buttons -->
529
+ <table class="w-20">
294
530
  <tr>
295
- <th class="bdr bdr-red">
531
+ <th class="bdr bdr-red tac">
296
532
  <button class="btn">
297
533
  <span>Product</span>
298
534
  <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
@@ -300,92 +536,125 @@
300
536
  </svg>
301
537
  </button>
302
538
  </th>
303
- <th class="bdr bdr-blue">
304
- <button class="" btn>
305
- <span>Product</span>
306
- <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
307
- <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
308
- </svg>
309
- </button>
310
- </th>
311
- <th>Product</th>
312
- <th>Description</th>
313
- <th>Price</th>
314
- <th>Stock</th>
315
- </tr>
316
- </thead>
317
- <tbody>
318
- <tr>
319
- <td>Wireless Mouse</td>
320
- <td>Ergonomic mouse with USB receiver</td>
321
- <td>$29.95</td>
322
- <td>54</td>
323
539
  </tr>
324
- <tr>
325
- <td>Keyboard</td>
326
- <td>Compact mechanical keyboard</td>
327
- <td>$69.00</td>
328
- <td>21</td>
329
- </tr>
330
- <tr>
331
- <td>Monitor</td>
332
- <td>24" 1080p IPS display</td>
333
- <td>$189.50</td>
334
- <td>12</td>
335
- </tr>
336
- </tbody>
337
- </table>
540
+ </table>
541
+ <svg class="wh-1 txt-muted" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
542
+ <path d="m7.191 20.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H1.715c-.39 0-.715.406-.715.91 0 .244.081.471.211.634l4.973 6.321c.13.163.308.26.503.26.196 0 .358-.098.504-.26ZM6.184 2.26 1.21 8.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L7.19 2.26A.647.647 0 0 0 6.688 2c-.196 0-.358.098-.504.26Z" />
543
+ </svg>
544
+ <svg class="wh-1 txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
545
+ <path d="M11.184 8.26 6.21 14.581c-.13.163-.211.39-.211.634 0 .488.325.91.715.91h9.945c.39 0 .715-.406.715-.91 0-.244-.081-.471-.211-.634L12.19 8.26a.647.647 0 0 0-.504-.26c-.194 0-.357.098-.503.26Z" />
546
+ </svg>
547
+ <svg class="wh-1 txt-purple" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
548
+ <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z" />
549
+ </svg>
550
+ <table>
551
+ <thead>
552
+ <tr>
553
+ <th class="bdr bdr-red">
554
+ <button class="btn">
555
+ <span>Product</span>
556
+ <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
557
+ <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
558
+ </svg>
559
+ </button>
560
+ </th>
561
+ <th class="bdr bdr-blue">
562
+ <button class="" btn>
563
+ <span>Product</span>
564
+ <svg class="icon txt-primary" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
565
+ <path d="m12.191 15.865 4.973-6.321c.13-.163.211-.39.211-.634 0-.488-.325-.91-.715-.91H6.715C6.325 8 6 8.406 6 8.91c0 .244.081.471.211.634l4.973 6.321a.65.65 0 0 0 .504.26c.194 0 .357-.098.503-.26Z"></path>
566
+ </svg>
567
+ </button>
568
+ </th>
569
+ <th>Product</th>
570
+ <th>Description</th>
571
+ <th>Price</th>
572
+ <th>Stock</th>
573
+ </tr>
574
+ </thead>
575
+ <tbody>
576
+ <tr>
577
+ <td>Wireless Mouse</td>
578
+ <td>Ergonomic mouse with USB receiver</td>
579
+ <td>$29.95</td>
580
+ <td>54</td>
581
+ </tr>
582
+ <tr>
583
+ <td>Keyboard</td>
584
+ <td>Compact mechanical keyboard</td>
585
+ <td>$69.00</td>
586
+ <td>21</td>
587
+ </tr>
588
+ <tr>
589
+ <td>Monitor</td>
590
+ <td>24" 1080p IPS display</td>
591
+ <td>$189.50</td>
592
+ <td>12</td>
593
+ </tr>
594
+ </tbody>
595
+ </table>
596
+ </div>
597
+ </section>
598
+ </main>
599
+
600
+
601
+
602
+
603
+
604
+ <!-- HERE -->
605
+
606
+
607
+
608
+ <div class="container">
609
+ <div class="grid cols-5">
610
+ <div class="primary pxy ">primary</div>
611
+ <div class="secondary pxy ">secondary</div>
612
+ <div class="accent pxy ">accent</div>
613
+ <div class="light pxy ">light</div>
614
+ <div class="dark pxy ">dark</div>
615
+ <div class="danger pxy ">danger</div>
616
+ <div class="info pxy ">info</div>
617
+ <div class="success pxy ">success</div>
618
+ <div class="warning pxy ">warning</div>
619
+ <div class="muted pxy ">muted</div>
620
+ <div class="stone pxy ">stone</div>
621
+ <div class="brown pxy ">brown</div>
622
+ <div class="red pxy ">red</div>
623
+ <div class="orange pxy ">orange</div>
624
+ <div class="amber pxy ">amber</div>
625
+ <div class="yellow pxy ">yellow</div>
626
+ <div class="lime pxy ">lime</div>
627
+ <div class="emerald pxy ">emerald</div>
628
+ <div class="green pxy ">green</div>
629
+ <div class="teal pxy ">teal</div>
630
+ <div class="cyan pxy ">cyan</div>
631
+ <div class="sky pxy ">sky</div>
632
+ <div class="blue pxy ">blue</div>
633
+ <div class="indigo pxy ">indigo</div>
634
+ <div class="purple pxy ">purple</div>
635
+ <div class="fuchsia pxy ">fuchsia</div>
636
+ <div class="pink pxy ">pink</div>
637
+ <div class="rose pxy ">rose</div>
638
+ <div class="white pxy ">white</div>
338
639
  </div>
339
- </section>
340
- </main>
341
-
342
-
343
-
344
-
345
-
346
- <!-- HERE -->
347
-
348
-
349
-
350
- <div class="container">
351
- <div class="grid cols-5">
352
- <div class="primary pxy ">primary</div>
353
- <div class="secondary pxy ">secondary</div>
354
- <div class="accent pxy ">accent</div>
355
- <div class="light pxy ">light</div>
356
- <div class="dark pxy ">dark</div>
357
- <div class="danger pxy ">danger</div>
358
- <div class="info pxy ">info</div>
359
- <div class="success pxy ">success</div>
360
- <div class="warning pxy ">warning</div>
361
- <div class="muted pxy ">muted</div>
362
- <div class="stone pxy ">stone</div>
363
- <div class="brown pxy ">brown</div>
364
- <div class="red pxy ">red</div>
365
- <div class="orange pxy ">orange</div>
366
- <div class="amber pxy ">amber</div>
367
- <div class="yellow pxy ">yellow</div>
368
- <div class="lime pxy ">lime</div>
369
- <div class="emerald pxy ">emerald</div>
370
- <div class="green pxy ">green</div>
371
- <div class="teal pxy ">teal</div>
372
- <div class="cyan pxy ">cyan</div>
373
- <div class="sky pxy ">sky</div>
374
- <div class="blue pxy ">blue</div>
375
- <div class="indigo pxy ">indigo</div>
376
- <div class="purple pxy ">purple</div>
377
- <div class="fuchsia pxy ">fuchsia</div>
378
- <div class="pink pxy ">pink</div>
379
- <div class="rose pxy ">rose</div>
380
- <div class="white pxy ">white</div>
381
640
  </div>
382
- </div>
383
- <!-- revised -->
384
- <div id="wrapper" class="zebra">
385
- <section id="navbar" class="py-3">
386
- <div class="container">
387
- <h2 class="title mb-3">Navbar</h2>
388
- <div class="h-10 bdr bg-gray-100">
641
+ <!-- revised -->
642
+ <div id="wrapper" class="zebra">
643
+ <section id="navbar" class="py-3">
644
+ <div class="container">
645
+ <h2 class="title mb-3">Navbar</h2>
646
+ <div class="h-10 bdr bg-gray-100">
647
+ <nav class="navbar">
648
+ <ul>
649
+ <li><a href="#">Home</a></li>
650
+ <li><a href="#">Services</a></li>
651
+ <li><a href="#">About</a></li>
652
+ <li><a href="#">Contact</a></li>
653
+ <li><a class="txt-red" href="#">Override</a></li>
654
+ </ul>
655
+ </nav>
656
+ </div>
657
+ <hr>
389
658
  <nav class="navbar">
390
659
  <ul>
391
660
  <li><a href="#">Home</a></li>
@@ -393,1846 +662,1693 @@
393
662
  <li><a href="#">About</a></li>
394
663
  <li><a href="#">Contact</a></li>
395
664
  <li><a class="txt-red" href="#">Override</a></li>
665
+ <li><a class="nav-item" href="#">Nav-Item</a></li>
666
+ <li><a class="active nav-item" href="#">Nav-Item (active)</a></li>
396
667
  </ul>
397
668
  </nav>
398
669
  </div>
399
- <hr>
400
- <nav class="navbar">
401
- <ul>
402
- <li><a href="#">Home</a></li>
403
- <li><a href="#">Services</a></li>
404
- <li><a href="#">About</a></li>
405
- <li><a href="#">Contact</a></li>
406
- <li><a class="txt-red" href="#">Override</a></li>
407
- <li><a class="nav-item" href="#">Nav-Item</a></li>
408
- <li><a class="active nav-item" href="#">Nav-Item (active)</a></li>
409
- </ul>
410
- </nav>
411
- </div>
412
- </section>
670
+ </section>
413
671
 
414
- <div class="bx bdr-red">
415
- <header class="container py">
416
- <div class="container flex space-between">
417
- <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo "></a>
418
- <div class="navbar">
419
- <nav>
420
- <ul>
421
- <li><a class="active" href="#">Home</a></li>
422
- <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
423
- x-on:mouseleave="showChildren=false">
424
- <a href="#">
425
- Services
426
- <svg class="icon sm">
427
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
428
- </svg>
429
- </a>
430
- <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
431
- x-transition.duration.200ms style="display: none;">
432
- <ul class="menu bx pxy-0 w-full">
433
- <li><a href="#">Graphic Design</a></li>
434
- <li><a href="#">Digital Marketing</a></li>
435
- <li><a href="#">Mobile App Development</a></li>
436
- <li><a href="#">IT Consulting</a></li>
437
- </ul>
438
- </div>
439
- </li>
440
- <li><a href="#">About</a></li>
441
- <li><a href="#">Contact</a></li>
442
- </ul>
443
- </nav>
444
- <div>
445
- <button class="btn">Sign in</button>
446
- <button class="btn primary">Sign up</button>
447
- </div>
448
- </div>
449
- </div>
450
- </header>
451
- <div class="navbar ha-l">
452
- <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
453
- <nav>
454
- <ul>
455
- <li class="dd">
456
- <a href="#">
457
- Parent (css)
458
- <svg class="icon sm">
459
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
460
- </svg>
461
- </a>
462
- <div class="dd-content mt-05">
463
- <ul class="menu bx pxy-0">
464
- <li><a class="txt-red" href="#">Child Override</a></li>
465
- <li><a href="#">Child</a></li>
466
- <li><a href="#">Child</a></li>
467
- </ul>
468
- </div>
469
- </li>
470
- <li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
471
- x-on:mouseleave="showChildren=true">
472
- <a href="#">
473
- Parent (alpine hover)
474
- <svg class="icon sm">
475
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
476
- </svg>
477
- </a>
478
- <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
479
- style="display: none;">
480
- <ul class="menu bx pxy-0 w-full">
481
- <li><a class="txt-red" href="#">Child Override</a></li>
482
- <li><a href="#">Child</a></li>
483
- <li><a href="#">Child</a></li>
484
- </ul>
485
- </div>
486
- </li>
487
- <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
488
- <a href="#" x-on:click.prevent="showChildren=!showChildren">
489
- Parent (alpine click)
490
- <svg class="icon sm">
491
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
492
- </svg>
493
- </a>
494
- <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
495
- style="display: none;">
496
- <ul class="menu bx pxy-0 w-full">
497
- <li><a class="txt-red" href="#">Child Override</a></li>
498
- <li><a href="#">Child</a></li>
499
- <li><a href="#">Child</a></li>
500
- </ul>
501
- </div>
502
- </li>
503
- <li><a class="txt-red" href="#">Override</a></li>
504
- <li><a class="active" href="#">Active</a></li>
505
- <li><a class="active nav-item" href="#">Active (nav-item)</a></li>
506
-
507
- </ul>
508
- </nav>
509
- </div>
510
- <div class="navbar ha-l primary">
511
- <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
512
- <nav>
513
- <ul>
514
- <li class="dd">
515
- <a href="#">
516
- Parent (css)
517
- <svg class="icon sm">
518
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
519
- </svg>
520
- </a>
521
- <div class="dd-content mt-05">
522
- <ul class="menu bx pxy-0">
523
- <li><a href="#">Child</a></li>
524
- <li><a href="#">Child</a></li>
525
- <li><a href="#">Child</a></li>
526
- </ul>
527
- </div>
528
- </li>
529
- <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
530
- x-on:mouseleave="showChildren=false">
531
- <a href="#">
532
- Parent (alpine hover)
533
- <svg class="icon sm">
534
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
535
- </svg>
536
- </a>
537
- <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
538
- style="display: none;">
539
- <ul class="menu bx pxy-0 w-full">
540
- <li><a href="#">Child</a></li>
541
- <li><a href="#">Child</a></li>
542
- <li><a href="#">Child</a></li>
543
- </ul>
544
- </div>
545
- </li>
546
- <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
547
- <a href="#" x-on:click.prevent="showChildren=!showChildren">
548
- Parent (alpine click)
549
- <svg class="icon sm">
550
- <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
551
- </svg>
552
- </a>
553
- <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
554
- style="display: none;">
555
- <ul class="menu bx pxy-0 w-full">
556
- <li><a href="#">Child</a></li>
557
- <li><a href="#">Child</a></li>
558
- <li><a href="#">Child</a></li>
672
+ <div class="bx bdr-red">
673
+ <header class="container py">
674
+ <div class="container flex space-between">
675
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo "></a>
676
+ <div class="navbar">
677
+ <nav>
678
+ <ul>
679
+ <li><a class="active" href="#">Home</a></li>
680
+ <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
681
+ x-on:mouseleave="showChildren=false">
682
+ <a href="#">
683
+ Services
684
+ <svg class="icon sm">
685
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
686
+ </svg>
687
+ </a>
688
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren"
689
+ x-transition.duration.200ms style="display: none;">
690
+ <ul class="menu bx pxy-0 w-full">
691
+ <li><a href="#">Graphic Design</a></li>
692
+ <li><a href="#">Digital Marketing</a></li>
693
+ <li><a href="#">Mobile App Development</a></li>
694
+ <li><a href="#">IT Consulting</a></li>
695
+ </ul>
696
+ </div>
697
+ </li>
698
+ <li><a href="#">About</a></li>
699
+ <li><a href="#">Contact</a></li>
559
700
  </ul>
701
+ </nav>
702
+ <div>
703
+ <button class="btn">Sign in</button>
704
+ <button class="btn primary">Sign up</button>
560
705
  </div>
561
- </li>
562
-
563
- </ul>
564
- </nav>
565
- </div>
566
- </div>
567
- <section id="lists" class="py-3">
568
- <div class="container">
569
- <h2 class="title mb-3">Lists</h2>
570
- <div class="bx">
571
- <div class="bx-title">Base Lists</div>
572
- <div class="inline-flex gap-3">
706
+ </div>
707
+ </div>
708
+ </header>
709
+ <div class="navbar ha-l">
710
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
711
+ <nav>
573
712
  <ul>
574
- <li>List item one</li>
575
- <li>List item two</li>
576
- <li>List item three</li>
713
+ <li class="dd">
714
+ <a href="#">
715
+ Parent (css)
716
+ <svg class="icon sm">
717
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
718
+ </svg>
719
+ </a>
720
+ <div class="dd-content mt-05">
721
+ <ul class="menu bx pxy-0">
722
+ <li><a class="txt-red" href="#">Child Override</a></li>
723
+ <li><a href="#">Child</a></li>
724
+ <li><a href="#">Child</a></li>
725
+ </ul>
726
+ </div>
727
+ </li>
728
+ <li class="relative" x-data="{showChildren:true}" x-on:mouseenter="showChildren=true"
729
+ x-on:mouseleave="showChildren=true">
730
+ <a href="#">
731
+ Parent (alpine hover)
732
+ <svg class="icon sm">
733
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
734
+ </svg>
735
+ </a>
736
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
737
+ style="display: none;">
738
+ <ul class="menu bx pxy-0 w-full">
739
+ <li><a class="txt-red" href="#">Child Override</a></li>
740
+ <li><a href="#">Child</a></li>
741
+ <li><a href="#">Child</a></li>
742
+ </ul>
743
+ </div>
744
+ </li>
745
+ <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
746
+ <a href="#" x-on:click.prevent="showChildren=!showChildren">
747
+ Parent (alpine click)
748
+ <svg class="icon sm">
749
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
750
+ </svg>
751
+ </a>
752
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
753
+ style="display: none;">
754
+ <ul class="menu bx pxy-0 w-full">
755
+ <li><a class="txt-red" href="#">Child Override</a></li>
756
+ <li><a href="#">Child</a></li>
757
+ <li><a href="#">Child</a></li>
758
+ </ul>
759
+ </div>
760
+ </li>
761
+ <li><a class="txt-red" href="#">Override</a></li>
762
+ <li><a class="active" href="#">Active</a></li>
763
+ <li><a class="active nav-item" href="#">Active (nav-item)</a></li>
764
+
577
765
  </ul>
578
- <ol>
579
- <li>List item one</li>
580
- <li>List item two</li>
581
- <li>List item three</li>
582
- </ol>
583
- </div>
766
+ </nav>
584
767
  </div>
585
- <div class="bx">
586
- <div class="bx-title">List Styles</div>
587
- <p class="txt-red">Check list styles to make sure bullets align correctly.</p>
588
- <div class="flex space-x">
589
- <ul class="bx list-none">
590
- <li>Item one</li>
591
- <li>Item two</li>
592
- <li>Item three</li>
593
- </ul>
594
- <ul class="bx list-decimal">
595
- <li>Item one</li>
596
- <li>Item two</li>
597
- <li>Item three</li>
598
- </ul>
599
- <ul class="bx list-square">
600
- <li>Item one</li>
601
- <li>Item two</li>
602
- <li>Item three</li>
603
- </ul>
604
- <ul class="bx list-circle">
605
- <li>Item one</li>
606
- <li>Item two</li>
607
- <li>Item three</li>
768
+ <div class="navbar ha-l primary">
769
+ <a href="#"><img src="/images/logo.svg" alt="naykel-logo" class="logo mr-3"></a>
770
+ <nav>
771
+ <ul>
772
+ <li class="dd">
773
+ <a href="#">
774
+ Parent (css)
775
+ <svg class="icon sm">
776
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
777
+ </svg>
778
+ </a>
779
+ <div class="dd-content mt-05">
780
+ <ul class="menu bx pxy-0">
781
+ <li><a href="#">Child</a></li>
782
+ <li><a href="#">Child</a></li>
783
+ <li><a href="#">Child</a></li>
784
+ </ul>
785
+ </div>
786
+ </li>
787
+ <li class="relative" x-data="{showChildren:false}" x-on:mouseenter="showChildren=true"
788
+ x-on:mouseleave="showChildren=false">
789
+ <a href="#">
790
+ Parent (alpine hover)
791
+ <svg class="icon sm">
792
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
793
+ </svg>
794
+ </a>
795
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
796
+ style="display: none;">
797
+ <ul class="menu bx pxy-0 w-full">
798
+ <li><a href="#">Child</a></li>
799
+ <li><a href="#">Child</a></li>
800
+ <li><a href="#">Child</a></li>
801
+ </ul>
802
+ </div>
803
+ </li>
804
+ <li class="relative" x-data="{showChildren:false}" x-on:click.away="showChildren=false">
805
+ <a href="#" x-on:click.prevent="showChildren=!showChildren">
806
+ Parent (alpine click)
807
+ <svg class="icon sm">
808
+ <use xlink:href="/svg/naykel-ui.svg#caret-down"></use>
809
+ </svg>
810
+ </a>
811
+ <div class="absolute mt-05 flex w-10 z-100" x-show="showChildren" x-transition.duration
812
+ style="display: none;">
813
+ <ul class="menu bx pxy-0 w-full">
814
+ <li><a href="#">Child</a></li>
815
+ <li><a href="#">Child</a></li>
816
+ <li><a href="#">Child</a></li>
817
+ </ul>
818
+ </div>
819
+ </li>
820
+
608
821
  </ul>
609
- </div>
822
+ </nav>
610
823
  </div>
611
- <div class="bx">
612
- <div class="bx-title">Nested Lists</div>
613
- <ul>
614
- <li>
615
- List item one
824
+ </div>
825
+ <section id="lists" class="py-3">
826
+ <div class="container">
827
+ <h2 class="title mb-3">Lists</h2>
828
+ <div class="bx">
829
+ <div class="bx-title">Base Lists</div>
830
+ <div class="inline-flex gap-3">
831
+ <ul>
832
+ <li>List item one</li>
833
+ <li>List item two</li>
834
+ <li>List item three</li>
835
+ </ul>
616
836
  <ol>
617
- <li>Nested list item one</li>
618
- <li>Nested list item two</li>
619
- <li>Nested list item three</li>
837
+ <li>List item one</li>
838
+ <li>List item two</li>
839
+ <li>List item three</li>
620
840
  </ol>
621
- </li>
622
- <li>
623
- List item two
624
- <p>paragraph inside a list item</p>
625
- </li>
626
- <li>List item three</li>
627
- </ul>
841
+ </div>
842
+ </div>
843
+ <div class="bx">
844
+ <div class="bx-title">List Styles</div>
845
+ <p class="txt-red">Check list styles to make sure bullets align correctly.</p>
846
+ <div class="flex space-x">
847
+ <ul class="bx list-none">
848
+ <li>Item one</li>
849
+ <li>Item two</li>
850
+ <li>Item three</li>
851
+ </ul>
852
+ <ul class="bx list-decimal">
853
+ <li>Item one</li>
854
+ <li>Item two</li>
855
+ <li>Item three</li>
856
+ </ul>
857
+ <ul class="bx list-square">
858
+ <li>Item one</li>
859
+ <li>Item two</li>
860
+ <li>Item three</li>
861
+ </ul>
862
+ <ul class="bx list-circle">
863
+ <li>Item one</li>
864
+ <li>Item two</li>
865
+ <li>Item three</li>
866
+ </ul>
867
+ </div>
868
+ </div>
869
+ <div class="bx">
870
+ <div class="bx-title">Nested Lists</div>
871
+ <ul>
872
+ <li>
873
+ List item one
874
+ <ol>
875
+ <li>Nested list item one</li>
876
+ <li>Nested list item two</li>
877
+ <li>Nested list item three</li>
878
+ </ol>
879
+ </li>
880
+ <li>
881
+ List item two
882
+ <p>paragraph inside a list item</p>
883
+ </li>
884
+ <li>List item three</li>
885
+ </ul>
886
+ </div>
628
887
  </div>
629
- </div>
630
- </section>
631
- </div>
632
-
888
+ </section>
889
+ </div>
633
890
 
634
- <!-- -->
635
- <!-- -->
636
- <!-- -->
637
- <!-- -->
638
- <!-- -->
639
- <!-- -->
640
- <!-- -->
641
- <!-- -->
642
- <!-- -->
643
- <!-- -->
644
- <!-- -->
645
891
 
892
+ <!-- -->
893
+ <!-- -->
894
+ <!-- -->
895
+ <!-- -->
896
+ <!-- -->
897
+ <!-- -->
898
+ <!-- -->
899
+ <!-- -->
900
+ <!-- -->
901
+ <!-- -->
902
+ <!-- -->
646
903
 
647
904
 
648
905
 
649
906
 
650
907
 
651
- <div class="container pxy bx">
652
- <div x-data="{ activeTab: 'home' }">
653
- <!-- Tabs Navigation -->
654
- <div class="tabs">
655
- <button
656
- @click="activeTab = 'home'"
657
- :class="activeTab === 'home' ? 'tab-active' : 'tab-inactive'"
658
- class="tab-btn">
659
- Home
660
- </button>
661
- <button
662
- @click="activeTab = 'profile'"
663
- :class="activeTab === 'profile' ? 'tab-active' : 'tab-inactive'"
664
- class="tab-btn">
665
- Profile
666
- </button>
667
- </div>
668
908
 
669
- <!-- Tabs Content -->
670
- <div class="mt">
671
- <div x-show="activeTab === 'home'">
672
- <h2>Home</h2>
673
- <p>This is the home tab content.</p>
909
+ <div class="container pxy bx">
910
+ <div x-data="{ activeTab: 'home' }">
911
+ <!-- Tabs Navigation -->
912
+ <div class="tabs">
913
+ <button
914
+ @click="activeTab = 'home'"
915
+ :class="activeTab === 'home' ? 'tab-active' : 'tab-inactive'"
916
+ class="tab-btn">
917
+ Home
918
+ </button>
919
+ <button
920
+ @click="activeTab = 'profile'"
921
+ :class="activeTab === 'profile' ? 'tab-active' : 'tab-inactive'"
922
+ class="tab-btn">
923
+ Profile
924
+ </button>
674
925
  </div>
675
- <div x-show="activeTab === 'profile'">
676
- <h2>Profile</h2>
677
- <p>This is the profile tab content.</p>
926
+
927
+ <!-- Tabs Content -->
928
+ <div class="mt">
929
+ <div x-show="activeTab === 'home'">
930
+ <h2>Home</h2>
931
+ <p>This is the home tab content.</p>
932
+ </div>
933
+ <div x-show="activeTab === 'profile'">
934
+ <h2>Profile</h2>
935
+ <p>This is the profile tab content.</p>
936
+ </div>
678
937
  </div>
679
938
  </div>
680
939
  </div>
681
- </div>
682
- <style>
683
- .fade-out-mask {
684
- -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
685
- mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
686
- max-height: 10em;
687
- overflow: hidden;
688
- }
689
-
690
- .expanded {
691
- -webkit-mask-image: none;
692
- mask-image: none;
693
- max-height: none;
694
- }
695
- </style>
696
-
697
-
698
- <div class="container-md py-5">
699
- <div x-data="{ expanded: false }" class="container-md py-5">
700
- <div :class="{'fade-out-mask': !expanded}" class="overflow-hidden">
701
- <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
702
- laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
703
- adipisci sunt ad voluptatem quam. </p>
704
- <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
705
- laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
706
- adipisci sunt ad voluptatem quam. </p>
707
- <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
708
- laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
709
- adipisci sunt ad voluptatem quam. </p>
710
- <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
711
- laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
712
- adipisci sunt ad voluptatem quam. </p>
713
- </div>
714
- <button x-on:click="expanded =! expanded" class="link mt">
715
- <div class="flex va-c" x-show="!expanded">
716
- Show more
717
- <svg class="icon sm ml-05">
718
- <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
719
- </svg>
940
+ <style>
941
+ .fade-out-mask {
942
+ -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
943
+ mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
944
+ max-height: 10em;
945
+ overflow: hidden;
946
+ }
947
+
948
+ .expanded {
949
+ -webkit-mask-image: none;
950
+ mask-image: none;
951
+ max-height: none;
952
+ }
953
+ </style>
954
+
955
+
956
+ <div class="container-md py-5">
957
+ <div x-data="{ expanded: false }" class="container-md py-5">
958
+ <div :class="{'fade-out-mask': !expanded}" class="overflow-hidden">
959
+ <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
960
+ laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
961
+ adipisci sunt ad voluptatem quam. </p>
962
+ <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
963
+ laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
964
+ adipisci sunt ad voluptatem quam. </p>
965
+ <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
966
+ laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
967
+ adipisci sunt ad voluptatem quam. </p>
968
+ <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro ipsa expedita, itaque
969
+ laudantium minima alias fugit. Perferendis rerum dolorem possimus fugiat dicta, commodi, voluptates
970
+ adipisci sunt ad voluptatem quam. </p>
720
971
  </div>
721
- <span class="flex va-c" x-show="expanded">
722
- Show less
723
- <svg class="icon sm ml-05">
724
- <use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
725
- </svg>
726
- </span>
727
- </button>
728
- </div>
729
- </div>
730
-
731
- <div class="pxy container">
732
- <div x-data="{ active: 0, }" class="divide-y bdr bdr-red">
733
- <div x-data="{
734
- id: 1,
735
- get expanded() { return this.active === this.id },
736
- set expanded(value) { this.active = value ? this.id : null }
737
- }">
738
- <button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
739
- <div class="flex space-between w-full" x-show="!expanded">
740
- Open Item One
741
- <svg class="icon">
742
- <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
743
- </svg>
744
- </div>
745
- <span class="flex space-between w-full" x-show="expanded">
746
- Close Item One
747
- <svg class="icon">
972
+ <button x-on:click="expanded =! expanded" class="link mt">
973
+ <div class="flex va-c" x-show="!expanded">
974
+ Show more
975
+ <svg class="icon sm ml-05">
748
976
  <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
749
977
  </svg>
750
- </span>
751
- </button>
752
- <div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
753
- Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
754
- necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
755
- </div>
756
- <div x-data="{
757
- id: 2,
758
- get expanded() { return this.active === this.id },
759
- set expanded(value) { this.active = value ? this.id : null }
760
- }">
761
- <button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
762
- <div class="flex space-between w-full" x-show="!expanded">
763
- Open Item Two
764
- <svg class="icon">
765
- <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
766
- </svg>
767
978
  </div>
768
- <span class="flex space-between w-full" x-show="expanded">
769
- Close Item Two
770
- <svg class="icon">
771
- <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
979
+ <span class="flex va-c" x-show="expanded">
980
+ Show less
981
+ <svg class="icon sm ml-05">
982
+ <use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
772
983
  </svg>
773
984
  </span>
774
985
  </button>
775
- <div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
776
- Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
777
- necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
778
986
  </div>
779
987
  </div>
780
- </div>
781
- <div class="pxy container">
782
- <div x-data="{ active: 0, }" class="space-y">
783
- <div x-data="{
988
+
989
+ <div class="pxy container">
990
+ <div x-data="{ active: 0, }" class="divide-y bdr bdr-red">
991
+ <div x-data="{
784
992
  id: 1,
785
993
  get expanded() { return this.active === this.id },
786
994
  set expanded(value) { this.active = value ? this.id : null }
787
995
  }">
788
- <button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
789
- <div class="flex space-between w-full" x-show="!expanded">
790
- Open Item One
791
- <svg class="icon">
792
- <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
793
- </svg>
794
- </div>
795
- <span class="flex space-between w-full" x-show="expanded">
796
- Close Item One
797
- <svg class="icon">
798
- <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
799
- </svg>
800
- </span>
801
- </button>
802
- <div x-show="expanded" class="bx"> Hey there! </div>
803
- </div>
804
- <div x-data="{
996
+ <button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
997
+ <div class="flex space-between w-full" x-show="!expanded">
998
+ Open Item One
999
+ <svg class="icon">
1000
+ <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
1001
+ </svg>
1002
+ </div>
1003
+ <span class="flex space-between w-full" x-show="expanded">
1004
+ Close Item One
1005
+ <svg class="icon">
1006
+ <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
1007
+ </svg>
1008
+ </span>
1009
+ </button>
1010
+ <div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
1011
+ Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
1012
+ necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
1013
+ </div>
1014
+ <div x-data="{
805
1015
  id: 2,
806
1016
  get expanded() { return this.active === this.id },
807
1017
  set expanded(value) { this.active = value ? this.id : null }
808
1018
  }">
809
- <button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
810
- <div class="flex space-between w-full" x-show="!expanded">
811
- Open Item Two
812
- <svg class="icon">
813
- <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
814
- </svg>
815
- </div>
816
- <span class="flex space-between w-full" x-show="expanded">
817
- Close Item Two
818
- <svg class="icon">
819
- <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
820
- </svg>
821
- </span>
822
- </button>
823
- <div x-show="expanded" class="bx"> Hey there! </div>
824
- </div>
825
- </div>
826
- </div>
827
- <div class="container mt">
828
- <div class="grid md:cols-2">
829
- <div class="divide-y zebra">
830
- <div class="h-2"></div>
831
- <div class="h-2"></div>
832
- <div class="h-2"></div>
833
- <div class="h-2"></div>
834
- </div>
835
- </div>
836
- </div>
837
- <div class="container mt">
838
- <div class="grid cols-2">
839
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis
840
- dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum
841
- harum, rerum explicabo ducimus.</p>
842
- <p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat
843
- eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet
844
- voluptatem voluptatibus animi molestias dignissimos nulla.</p>
845
- <p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est
846
- exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa
847
- obcaecati ullam ipsam eveniet velit sunt?</p>
848
- <p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi
849
- dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium
850
- officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
851
- </div>
852
- </div>
853
- <div class="quick-hide-div zebra">
854
- <section class="py-3">
855
- <div class="container">
856
- <h2 class="title txt-3">Naykel UI Icons</h2>
857
- <div class="flex">
858
- <svg class="icon">
859
- <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
860
- </svg>
861
- <svg class="icon">
862
- <use xlink:href="svg/naykel-ui.svg#chevron-left"></use>
863
- </svg>
864
- <svg class="icon">
865
- <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
866
- </svg>
867
- <svg class="icon">
868
- <use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
869
- </svg>
870
- </div>
871
- </div>
872
- </section>
873
- <section id="button-control-sizes-examples" class="py-3">
874
- <div class="container space-y">
875
- <h2 class="title txt-3">Button and Control Sizes</h2>
876
- <div>
877
- <button class="btn primary xs">Extra Small</button>
878
- <input class="xs" placeholder="Text Input">
879
- </div>
880
- <div>
881
- <button class="btn primary sm">Small</button>
882
- <input class="sm" placeholder="Text Input">
883
- </div>
884
- <div>
885
- <button class="btn primary">Base</button>
886
- <input placeholder="Text Input">
887
- </div>
888
- <div>
889
- <button class="btn primary lg">Large</button>
890
- <input class="lg" placeholder="Text Input">
891
- </div>
892
- <div>
893
- <button class="btn primary xl">Extra Large</button>
894
- <input class="xl" placeholder="Text Input">
1019
+ <button x-on:click="expanded =! expanded" class="flex space-between va-c w-full pxy bg-blue-50">
1020
+ <div class="flex space-between w-full" x-show="!expanded">
1021
+ Open Item Two
1022
+ <svg class="icon">
1023
+ <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
1024
+ </svg>
1025
+ </div>
1026
+ <span class="flex space-between w-full" x-show="expanded">
1027
+ Close Item Two
1028
+ <svg class="icon">
1029
+ <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
1030
+ </svg>
1031
+ </span>
1032
+ </button>
1033
+ <div x-show="expanded" class="pxy mxy-0"> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
1034
+ Excepturi ab beatae labore est nam corporis dolorem delectus molestias voluptate, totam, error
1035
+ necessitatibus! Asperiores saepe, impedit obcaecati sint dignissimos reprehenderit vero? </div>
895
1036
  </div>
896
1037
  </div>
897
- </section>
898
-
899
- <section id="menu-component" class="py-3">
900
- <div class="container space-y">
901
- <h2 class="title txt-3">Menu Component</h2>
902
- <h4>Base Component</h4>
903
- <div class="bx grid md:cols-3">
904
- <div class="menu">
905
- <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
906
- <div class="menu-title">Menu Title</div>
907
- <a href="">Item</a>
908
- <a href="">Parent</a>
909
- <a href="" class="active">Active</a>
910
- <a href="" class="disabled">Disabled</a>
911
- </div>
912
- <nav class="menu">
913
- <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
914
- <div class="menu-title">Menu Title</div>
915
- <a href="">Item</a>
916
- <a href="">Parent</a>
917
- <a href="" class="active">Active</a>
918
- <a href="" class="disabled">Disabled</a>
919
- </nav>
920
- <ul class="menu">
921
- <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
922
- <div class="menu-title">Menu Title</div>
923
- <li><a href="">Item</a></li>
924
- <li><a href="">Parent</a></li>
925
- <li><a href="" class="active">Active</a></li>
926
- <li><a href="" class="disabled">Disabled</a></li>
927
- </ul>
928
- </div>
929
- <h4>With Menu-Item</h4>
930
- <div class="bx grid md:cols-3">
931
- <div class="menu">
932
- <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
933
- <div class="menu-title">Menu Title</div>
934
- <a class="menu-item" href="">Item</a>
935
- <a class="menu-item" href="">Parent</a>
936
- <a class="menu-item active" href="">Active</a>
937
- <a class="menu-item disabled" href="">Disabled</a>
938
- </div>
939
- <nav class="menu">
940
- <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
941
- <div class="menu-title">Menu Title</div>
942
- <a class="menu-item" href="">Item</a>
943
- <a class="menu-item" href="">Parent</a>
944
- <a class="menu-item active" href="">Active</a>
945
- <a class="menu-item disabled" href="">Disabled</a>
946
- </nav>
947
- <ul class="menu">
948
- <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
949
- <div class="menu-title">Menu Title</div>
950
- <li><a class="menu-item" href="">Item</a></li>
951
- <li><a class="menu-item" href="">Parent</a></li>
952
- <li><a class="menu-item active" href="">Active</a></li>
953
- <li><a class="menu-item disabled" href="">Disabled</a></li>
954
- </ul>
955
- </div>
956
- </section>
957
- <section id="form-controls" class="py-3">
958
- <div class="container">
959
- <h2 class="title txt-3">Form Controls</h2>
960
- <div class="grid cols-2">
961
- <div id="radio-check-toggle">
962
- <h5>Radio</h5>
963
- <div class="space-x">
964
- <label><input type="radio" name="abc">Option</label>
965
- <label><input type="radio" name="abc" checked>Checked</label>
966
- <label><input type="radio" name="abc" disabled>Disabled</label>
967
- </div>
968
- <h5>Checkbox</h5>
969
- <div class="space-x">
970
- <label><input type="checkbox">Option</label>
971
- <label><input type="checkbox" checked>Checked</label>
972
- <label><input type="checkbox" disabled>Disabled</label>
973
- </div>
974
- <h5>Slider</h5>
975
- <div class="space-x">
976
- <label class="toggle">
977
- <input type="checkbox">
978
- <div class="slider"></div>
979
- <span>Option</span>
980
- </label>
981
- <label class="toggle">
982
- <input type="checkbox" checked>
983
- <div class="slider"></div>
984
- <span>Checked</span>
985
- </label>
986
- <label class="toggle">
987
- <input type="checkbox" disabled>
988
- <div class="slider"></div>
989
- <span>Disabled</span>
990
- </label>
991
- </div>
992
- </div>
993
- <div id="label-with-tooltip">
994
- <h5 class="my">Label with Tooltip</h5>
995
- <div class="flex va-c space-between mb-05 bdr">
996
- <label> My Label </label>
997
- <span x-data="{open:false}" class="relative" x-on:mouseenter="open=true"
998
- x-on:mouseleave="open=false">
999
- <div class="flex va-c">
1000
- <svg class="txt-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
1001
- fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
1002
- aria-hidden="true" data-slot="icon">
1003
- <path stroke-linecap="round" stroke-linejoin="round"
1004
- d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z">
1005
- </path>
1006
- </svg>
1007
- </div>
1008
- <div class="absolute right-0 minw-18 z-100 bx pxy-075 mt-05 txt-sm fw4 bg-stone-50"
1009
- x-show="open" x-transition.duration="" style="display: none;">
1010
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vitae
1011
- perspiciatis officiis iste omnis, iure quasi, rerum minus magnam consequatur eos ut
1012
- aliquam aspernatur sapiente veniam! Repudiandae voluptatum eius ducimus?
1013
- </div>
1014
- </span>
1038
+ </div>
1039
+ <div class="pxy container">
1040
+ <div x-data="{ active: 0, }" class="space-y">
1041
+ <div x-data="{
1042
+ id: 1,
1043
+ get expanded() { return this.active === this.id },
1044
+ set expanded(value) { this.active = value ? this.id : null }
1045
+ }">
1046
+ <button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
1047
+ <div class="flex space-between w-full" x-show="!expanded">
1048
+ Open Item One
1049
+ <svg class="icon">
1050
+ <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
1051
+ </svg>
1015
1052
  </div>
1016
- </div>
1053
+ <span class="flex space-between w-full" x-show="expanded">
1054
+ Close Item One
1055
+ <svg class="icon">
1056
+ <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
1057
+ </svg>
1058
+ </span>
1059
+ </button>
1060
+ <div x-show="expanded" class="bx"> Hey there! </div>
1017
1061
  </div>
1018
- <div id="file-input">
1019
- <div class="my">
1020
- <input type="file" name="name">
1021
- <!-- <button type="submit" class="btn">Upload</button> -->
1022
- <input type="text">
1023
- </div>
1024
- <hr>
1025
- <label class="file">
1026
- <input type="file" name="name">
1027
- <span> Select file... </span>
1028
- </label>
1029
- <div>
1030
- <label class="file bdr">
1031
- <input type="file" name="file">
1032
- <span>Choose a file…</span>
1033
- </label>
1034
- <div class="frm-row my">
1035
- <label class="file btn">
1036
- <input type="file" name="">
1037
- <svg class="wh-1.25 mr-075" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
1038
- viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
1039
- <path fill-rule="evenodd"
1040
- d="M11.47 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06l-3.22-3.22V16.5a.75.75 0 0 1-1.5 0V4.81L8.03 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5ZM3 15.75a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
1041
- clip-rule="evenodd" />
1042
- </svg>
1043
- <span>Choose a file...</span>
1044
- </label>
1045
- </div>
1046
- </div>
1047
- <div class="frm-row">
1048
- <label for="success" class="txt-success-light">Your name</label>
1049
- <input type="text" id="success" class="success-light" placeholder="Success input">
1050
- <p class="txt-success-light txt-sm"><span class="font-medium">Well done!</span> Some success
1051
- message.</p>
1052
- </div>
1053
- <div class="frm-row">
1054
- <label for="error" class="block mb-2 text-sm text-red-700 dark:text-red-500">Your
1055
- name</label>
1056
- <input type="text" id="error"
1057
- class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500"
1058
- placeholder="Error input">
1059
- <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh,
1060
- snapp!</span> Some error message.</p>
1061
- </div>
1062
- <div class="frm-row">
1063
- <div class="withAddons">
1064
- <input type="text">
1065
- <div class="trailingAddon"> Trailing </div>
1066
- <div class="leadingAddon"> Leading </div>
1067
- </div>
1068
- </div>
1069
- <div class="frm-row">
1070
- <div class="withAddons">
1071
- <div class="leadingAddon"> Leading </div>
1072
- <div class="trailingAddon"> Trailing </div>
1073
- <input type="text">
1062
+ <div x-data="{
1063
+ id: 2,
1064
+ get expanded() { return this.active === this.id },
1065
+ set expanded(value) { this.active = value ? this.id : null }
1066
+ }">
1067
+ <button x-on:click="expanded =! expanded" class="flex space-between va-c dark w-full pxy">
1068
+ <div class="flex space-between w-full" x-show="!expanded">
1069
+ Open Item Two
1070
+ <svg class="icon">
1071
+ <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
1072
+ </svg>
1074
1073
  </div>
1075
- </div>
1076
- </div>
1077
- </div>
1078
- </section>
1079
- <section id="box" class="py-3">
1080
- <div class="container">
1081
- <h2>Boxes</h2>
1082
- <div class="grid cols-3">
1083
- <div class="bx">
1084
- <div class="bx-title">Super Awesome Title</div>
1085
- <p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
1086
- repellendus tempora, molestiae eveniet.</p>
1087
- </div>
1088
- </div>
1089
- </div>
1090
- </section>
1091
- <section id="notifications" class="py-3">
1092
- <div class="container">
1093
- <div class="grid cols-3">
1094
- <div class="bx pxy-1 flex va-c">
1095
- <svg class="txt-green wh-2">
1096
- <use xlink:href="svg/naykel-ui.svg#check-circle"></use>
1097
- </svg>
1098
- <div class="ml-075">Success message!</div>
1099
- <button class="ml-auto">
1074
+ <span class="flex space-between w-full" x-show="expanded">
1075
+ Close Item Two
1100
1076
  <svg class="icon">
1101
- <use xlink:href="svg/naykel-ui.svg#x-mark"></use>
1077
+ <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
1102
1078
  </svg>
1103
- </button>
1104
- </div>
1105
- </div>
1106
- </div>
1107
- </section>
1108
- <section id="alignment-techniques" class="py-3">
1109
- <div class="container">
1110
- <h2>Alignment Techniques</h2>
1111
- <div class="grid cols-3">
1112
- <div class="bdr flex va-c">
1113
- <div class="wh-3 pink"></div>
1114
- <div class="wh-4 blue"></div>
1115
- <div class="ml-auto wh-3 pink"></div>
1116
- </div>
1117
- <div class="bdr flex va-c">
1118
- <span class="wh-3 pink"></span>
1119
- <div class="fg1 wh-4 blue"></div>
1120
- <span class="wh-3 pink"></span>
1121
- </div>
1079
+ </span>
1080
+ </button>
1081
+ <div x-show="expanded" class="bx"> Hey there! </div>
1122
1082
  </div>
1123
1083
  </div>
1124
- </section>
1125
- <section id="typography" class="py-3">
1126
- <div class="container">
1127
- <h2 class="title mb-3">Typography</h2>
1128
- <div class="grid-3 cols-2">
1129
- <div id="headings">
1130
- <h1>Heading 1</h1>
1131
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1132
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1133
- <h2>Heading 2</h2>
1134
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1135
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1136
- <h3>Heading 3</h3>
1137
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1138
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1139
- <h4>Heading 4</h4>
1140
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1141
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1142
- <h5>Heading 5</h5>
1143
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1144
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1145
- <h6>Heading 6</h6>
1146
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1147
- soluta harum beatae qui reiciendis possimus molestiae?</p>
1148
- </div>
1149
- <div>
1150
- <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
1151
- quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
1152
- numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
1153
-
1154
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
1155
- laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
1156
- architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
1157
- quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
1158
- ipsam!</p>
1159
-
1160
- <h3 class="title">Text Sizes</h3>
1161
- <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1162
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1163
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1164
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
1165
- <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1166
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1167
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1168
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
1169
- <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
1170
- delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
1171
- exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
1172
- deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
1173
- <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1174
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1175
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1176
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
1177
- <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1178
- asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1179
- similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1180
- repudiandae, aliquam fugit? Eum, expedita officia!</p>
1181
- </div>
1084
+ </div>
1085
+ <div class="container mt">
1086
+ <div class="grid md:cols-2">
1087
+ <div class="divide-y zebra">
1088
+ <div class="h-2"></div>
1089
+ <div class="h-2"></div>
1090
+ <div class="h-2"></div>
1091
+ <div class="h-2"></div>
1182
1092
  </div>
1183
1093
  </div>
1184
- </section>
1185
- </div>
1186
-
1187
- <!-- -->
1188
- <!-- -->
1189
- <!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
1190
- <!-- -->
1191
- <!-- -->
1192
- <div class="container py-5">
1193
- <div class="overflow-x-auto rounded-lg bdr">
1194
- <table>
1195
- <thead class="txt-upper">
1196
- <tr>
1197
- <th scope="col" class=""> Product name </th>
1198
- <th scope="col" class=""> Color </th>
1199
- <th scope="col" class=""> Category </th>
1200
- <th scope="col" class=""> Price </th>
1201
- <th scope="col" class=""> Action </th>
1202
- </tr>
1203
- </thead>
1204
- <tbody class="divide-y bdr-t">
1205
- <tr class="">
1206
- <th scope="row" class=""> Apple MacBook Pro 17" </th>
1207
- <td class=""> Silver </td>
1208
- <td class=""> Laptop </td>
1209
- <td class=""> $2999 </td>
1210
- <td class=""> <a href="#">Edit</a> </td>
1211
- </tr>
1212
- <tr class="bdr-green bdr5">
1213
- <th scope="row" class=""> Microsoft Surface Pro </th>
1214
- <td class=""> White </td>
1215
- <td class=""> Laptop PC </td>
1216
- <td class=""> $1999 </td>
1217
- <td class=""> <a href="#">Edit</a> </td>
1218
- </tr>
1219
- <tr class="">
1220
- <th scope="row" class=""> Magic Mouse 2 </th>
1221
- <td class=""> Black </td>
1222
- <td class=""> Accessories </td>
1223
- <td class=""> $99 </td>
1224
- <td class=""> <a href="#">Edit</a> </td>
1225
- </tr>
1226
- <tr class="">
1227
- <th scope="row" class=""> Google Pixel Phone </th>
1228
- <td class=""> Gray </td>
1229
- <td class=""> Phone </td>
1230
- <td class=""> $799 </td>
1231
- <td class=""> <a href="#">Edit</a> </td>
1232
- </tr>
1233
- <tr class="">
1234
- <th scope="row" class=""> Apple Watch 5 </th>
1235
- <td class=""> Red </td>
1236
- <td class=""> Wearables </td>
1237
- <td class=""> $999 </td>
1238
- <td class=""> <a href="#">Edit</a> </td>
1239
- </tr>
1240
- </tbody>
1241
- </table>
1242
- </div>
1243
- <hr>
1244
- <div class="overflow-x-auto rounded-lg bdr">
1245
- <table>
1246
- <thead class="txt-upper">
1247
- <tr>
1248
- <th scope="col" class=""> Product name </th>
1249
- <th scope="col" class=""> Color </th>
1250
- <th scope="col" class=""> Category </th>
1251
- <th scope="col" class=""> Price </th>
1252
- <th scope="col" class=""> Action </th>
1253
- </tr>
1254
- </thead>
1255
- <tbody class="divide-y">
1256
- <tr class="bdr-b bdr-light">
1257
- <th scope="row" class=""> Apple MacBook Pro 17" </th>
1258
- <td class=""> Silver </td>
1259
- <td class=""> Laptop </td>
1260
- <td class=""> $2999 </td>
1261
- <td class=""> <a href="#">Edit</a> </td>
1262
- </tr>
1263
- <tr class="bdr-b bdr-light">
1264
- <th scope="row" class=""> Microsoft Surface Pro </th>
1265
- <td class=""> White </td>
1266
- <td class=""> Laptop PC </td>
1267
- <td class=""> $1999 </td>
1268
- <td class=""> <a href="#">Edit</a> </td>
1269
- </tr>
1270
- <tr class="bdr-b bdr-light">
1271
- <th scope="row" class=""> Magic Mouse 2 </th>
1272
- <td class=""> Black </td>
1273
- <td class=""> Accessories </td>
1274
- <td class=""> $99 </td>
1275
- <td class=""> <a href="#">Edit</a> </td>
1276
- </tr>
1277
- <tr class="bdr-b bdr-light">
1278
- <th scope="row" class=""> Google Pixel Phone </th>
1279
- <td class=""> Gray </td>
1280
- <td class=""> Phone </td>
1281
- <td class=""> $799 </td>
1282
- <td class=""> <a href="#">Edit</a> </td>
1283
- </tr>
1284
- <tr class="bdr-blue-40">
1285
- <th scope="row" class=""> Apple Watch 5 </th>
1286
- <td class=""> Red </td>
1287
- <td class=""> Wearables </td>
1288
- <td class=""> $999 </td>
1289
- <td class=""> <a href="#">Edit</a> </td>
1290
- </tr>
1291
- </tbody>
1292
- </table>
1293
1094
  </div>
1294
- <hr>
1295
- <div class="overflow-x-auto rounded-lg">
1296
- <table>
1297
- <thead class="txt-upper txt-white bg-blue-600">
1298
- <tr>
1299
- <th scope="col" class=""> Product name </th>
1300
- <th scope="col" class=""> Color </th>
1301
- <th scope="col" class=""> Category </th>
1302
- <th scope="col" class=""> Price </th>
1303
- <th scope="col" class=""> Action </th>
1304
- </tr>
1305
- </thead>
1306
- <tbody>
1307
- <tr class="bg-blue-500 bdr-b bdr-light">
1308
- <th scope="row" class=""> Apple MacBook Pro 17" </th>
1309
- <td class=""> Silver </td>
1310
- <td class=""> Laptop </td>
1311
- <td class=""> $2999 </td>
1312
- <td class=""> <a href="#">Edit</a> </td>
1313
- </tr>
1314
- <tr class="bg-blue-500 bdr-b bdr-light">
1315
- <th scope="row" class="">
1316
- Microsoft Surface Pro
1317
- </th>
1318
- <td class=""> White </td>
1319
- <td class=""> Laptop PC </td>
1320
- <td class=""> $1999 </td>
1321
- <td class=""> <a href="#">Edit</a> </td>
1322
- </tr>
1323
- <tr class="bg-blue-500 bdr-b bdr-light">
1324
- <th scope="row" class=""> Magic Mouse 2 </th>
1325
- <td class=""> Black </td>
1326
- <td class=""> Accessories </td>
1327
- <td class=""> $99 </td>
1328
- <td class=""> <a href="#">Edit</a> </td>
1329
- </tr>
1330
- <tr class="bg-blue-500 bdr-b bdr-light">
1331
- <th scope="row" class=""> Google Pixel Phone </th>
1332
- <td class=""> Gray </td>
1333
- <td class=""> Phone </td>
1334
- <td class=""> $799 </td>
1335
- <td class=""> <a href="#">Edit</a> </td>
1336
- </tr>
1337
- <tr class="bg-blue-500 bdr-blue-40">
1338
- <th scope="row" class=""> Apple Watch 5 </th>
1339
- <td class=""> Red </td>
1340
- <td class=""> Wearables </td>
1341
- <td class=""> $999 </td>
1342
- <td class=""> <a href="#">Edit</a> </td>
1343
- </tr>
1344
- </tbody>
1345
- </table>
1095
+ <div class="container mt">
1096
+ <div class="grid cols-2">
1097
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis
1098
+ dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum
1099
+ harum, rerum explicabo ducimus.</p>
1100
+ <p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat
1101
+ eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet
1102
+ voluptatem voluptatibus animi molestias dignissimos nulla.</p>
1103
+ <p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est
1104
+ exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa
1105
+ obcaecati ullam ipsam eveniet velit sunt?</p>
1106
+ <p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi
1107
+ dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium
1108
+ officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
1109
+ </div>
1346
1110
  </div>
1347
- </div>
1348
-
1349
- <div>
1350
- <div class="quick-hide-wrapper zebra c-py-5-3-2">
1351
- <section id="theme-examples">
1111
+ <div class="quick-hide-div zebra">
1112
+ <section class="py-3">
1352
1113
  <div class="container">
1353
- <h2 class="title txt-3">Basic Themes</h2>
1354
- <h4>Base Colors</h4>
1355
- <div class="grid-1 cols-6">
1356
- <div class="pxy bdr-3 tac stone">stone</div>
1357
- <div class="pxy bdr-3 tac brown">brown</div>
1358
- <div class="pxy bdr-3 tac red">red</div>
1359
- <div class="pxy bdr-3 tac orange">orange</div>
1360
- <div class="pxy bdr-3 tac amber">amber</div>
1361
- <div class="pxy bdr-3 tac yellow">yellow</div>
1362
- <div class="pxy bdr-3 tac lime">lime</div>
1363
- <div class="pxy bdr-3 tac emerald">emerald</div>
1364
- <div class="pxy bdr-3 tac green">green</div>
1365
- <div class="pxy bdr-3 tac teal">teal</div>
1366
- <div class="pxy bdr-3 tac cyan">cyan</div>
1367
- <div class="pxy bdr-3 tac sky">sky</div>
1368
- <div class="pxy bdr-3 tac blue">blue</div>
1369
- <div class="pxy bdr-3 tac indigo">indigo</div>
1370
- <div class="pxy bdr-3 tac purple">purple</div>
1371
- <div class="pxy bdr-3 tac fuchsia">fuchsia</div>
1372
- <div class="pxy bdr-3 tac pink">pink</div>
1373
- <div class="pxy bdr-3 tac rose">rose</div>
1374
- </div>
1375
- <h4>Theme Colors and Alert Colors</h4>
1376
- <div class="grid cols-5">
1377
- <div class="pxy bdr-3 tac primary">primary</div>
1378
- <div class="pxy bdr-3 tac secondary">secondary</div>
1379
- <div class="pxy bdr-3 tac accent">accent</div>
1380
- <div class="pxy bdr-3 tac light">light</div>
1381
- <div class="pxy bdr-3 tac dark">dark</div>
1382
- <div class="pxy bdr-3 tac muted">muted</div>
1383
- <div class="pxy bdr-3 tac danger">danger</div>
1384
- <div class="pxy bdr-3 tac info">info</div>
1385
- <div class="pxy bdr-3 tac success">success</div>
1386
- <div class="pxy bdr-3 tac warning">warning</div>
1387
- </div>
1388
- </div>
1389
- </section>
1390
- <section id="theme-examples-with-state">
1391
- <div class="container">
1392
- <h2 class="title txt-3">Themes With State</h2>
1393
- <h4>Base Colors</h4>
1394
- <div class="grid-1 cols-6">
1395
- <div class="pxy bdr-3 tac withState stone">stone</div>
1396
- <div class="pxy bdr-3 tac withState brown">brown</div>
1397
- <div class="pxy bdr-3 tac withState red">red</div>
1398
- <div class="pxy bdr-3 tac withState orange">orange</div>
1399
- <div class="pxy bdr-3 tac withState amber">amber</div>
1400
- <div class="pxy bdr-3 tac withState yellow">yellow</div>
1401
- <div class="pxy bdr-3 tac withState lime">lime</div>
1402
- <div class="pxy bdr-3 tac withState emerald">emerald</div>
1403
- <div class="pxy bdr-3 tac withState green">green</div>
1404
- <div class="pxy bdr-3 tac withState teal">teal</div>
1405
- <div class="pxy bdr-3 tac withState cyan">cyan</div>
1406
- <div class="pxy bdr-3 tac withState sky">sky</div>
1407
- <div class="pxy bdr-3 tac withState blue">blue</div>
1408
- <div class="pxy bdr-3 tac withState indigo">indigo</div>
1409
- <div class="pxy bdr-3 tac withState purple">purple</div>
1410
- <div class="pxy bdr-3 tac withState fuchsia">fuchsia</div>
1411
- <div class="pxy bdr-3 tac withState pink">pink</div>
1412
- <div class="pxy bdr-3 tac withState rose">rose</div>
1413
- </div>
1414
- <h4>Theme Colors and Alert Colors</h4>
1415
- <div class="grid cols-5">
1416
- <div class="pxy bdr-3 tac withState primary">primary</div>
1417
- <div class="pxy bdr-3 tac withState secondary">secondary</div>
1418
- <div class="pxy bdr-3 tac withState accent">accent</div>
1419
- <div class="pxy bdr-3 tac withState light">light</div>
1420
- <div class="pxy bdr-3 tac withState dark">dark</div>
1421
- <div class="pxy bdr-3 tac withState muted">muted</div>
1422
- <div class="pxy bdr-3 tac withState danger">danger</div>
1423
- <div class="pxy bdr-3 tac withState info">info</div>
1424
- <div class="pxy bdr-3 tac withState success">success</div>
1425
- <div class="pxy bdr-3 tac withState warning">warning</div>
1114
+ <h2 class="title txt-3">Naykel UI Icons</h2>
1115
+ <div class="flex">
1116
+ <svg class="icon">
1117
+ <use xlink:href="svg/naykel-ui.svg#chevron-down"></use>
1118
+ </svg>
1119
+ <svg class="icon">
1120
+ <use xlink:href="svg/naykel-ui.svg#chevron-left"></use>
1121
+ </svg>
1122
+ <svg class="icon">
1123
+ <use xlink:href="svg/naykel-ui.svg#chevron-right"></use>
1124
+ </svg>
1125
+ <svg class="icon">
1126
+ <use xlink:href="svg/naykel-ui.svg#chevron-up"></use>
1127
+ </svg>
1426
1128
  </div>
1427
1129
  </div>
1428
1130
  </section>
1429
-
1430
- </div>
1431
-
1432
- <main class="container maxw-lg c-py-3-2">
1433
- <section>
1434
- <h2>Theme Boxes</h2>
1435
- <div class="grid cols-3 my">
1436
- <div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1437
- debitis molestiae expedita reiciendis molestias.
1438
- <a href="">Link</a>
1131
+ <section id="button-control-sizes-examples" class="py-3">
1132
+ <div class="container space-y">
1133
+ <h2 class="title txt-3">Button and Control Sizes</h2>
1134
+ <div>
1135
+ <button class="btn primary xs">Extra Small</button>
1136
+ <input class="xs" placeholder="Text Input">
1439
1137
  </div>
1440
- <div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1441
- debitis molestiae expedita reiciendis molestias.
1442
- <a href="">Link</a>
1138
+ <div>
1139
+ <button class="btn primary sm">Small</button>
1140
+ <input class="sm" placeholder="Text Input">
1443
1141
  </div>
1444
- <div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1445
- debitis molestiae expedita reiciendis molestias.
1446
- <a href="">Link</a>
1142
+ <div>
1143
+ <button class="btn primary">Base</button>
1144
+ <input placeholder="Text Input">
1447
1145
  </div>
1448
- </div>
1449
- </section>
1450
-
1451
- <select id="countries"
1452
- class="bg-gray-50 bdr bdr-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:bdr-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:bdr-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:bdr-blue-500">
1453
- <option selected>Choose a country</option>
1454
- <option value="US">United States</option>
1455
- <option value="CA">Canada</option>
1456
- <option value="FR">France</option>
1457
- <option value="DE">Germany</option>
1458
- </select>
1459
-
1460
-
1461
- <section>
1462
- <h2>Form Controls and Buttons</h2>
1463
- <select class="w-full" multiple>
1464
- <option value="Sports">Sports</option>
1465
- <option value="Entertainment">Entertainment</option>
1466
- <option value="Science and Technology">Science and Technology</option>
1467
- <option value="Arts and Culture">Arts and Culture</option>
1468
- <option value="Health and Wellness">Health and Wellness</option>
1469
- </select>
1470
-
1471
- </section>
1472
- <article>
1473
-
1474
-
1475
-
1476
- <div class="flex">
1477
1146
  <div>
1478
- <ul class="w-10">
1479
- <li>One</li>
1480
- <li>Two</li>
1481
- <li>Three</li>
1482
- </ul>
1147
+ <button class="btn primary lg">Large</button>
1148
+ <input class="lg" placeholder="Text Input">
1483
1149
  </div>
1484
1150
  <div>
1485
- <ol class="w-10">
1486
- <li>One</li>
1487
- <li>Two</li>
1488
- <li>Three</li>
1489
- </ol>
1151
+ <button class="btn primary xl">Extra Large</button>
1152
+ <input class="xl" placeholder="Text Input">
1490
1153
  </div>
1491
- <nav>
1492
- <ul class="w-10">
1493
- <li>Nav Item One</li>
1494
- <li>Nav Item Two</li>
1495
- <li>Nav Item Three</li>
1496
- </ul>
1497
- </nav>
1498
1154
  </div>
1155
+ </section>
1499
1156
 
1500
- <ul>
1501
- <li>Lorem ipsum dolor sit amet.</li>
1502
- <li>Lorem ipsum dolor sit amet.</li>
1503
- <li>Lorem ipsum dolor sit amet.</li>
1504
- </ul>
1505
- </article>
1506
-
1507
- <section id="alerts">
1508
- <h2>Alerts</h2>
1509
- <div class="grid cols-2">
1510
- <div class="bx danger flex">
1511
- <svg class="icon wh-3 fs0 mr-2">
1512
- <use xlink:href="/svg/naykel-ui.svg#warning"></use>
1513
- </svg>
1514
- <div>
1515
- <div class="bx-title">Alert Title</div>
1516
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1517
- </div>
1518
- </div>
1519
- <div class="bx danger-light flex">
1520
- <svg class="icon wh-3 fs0 mr-2">
1521
- <use xlink:href="/svg/naykel-ui.svg#warning"></use>
1522
- </svg>
1523
- <div>
1524
- <div class="bx-title">Alert Title</div>
1525
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1157
+ <section id="menu-component" class="py-3">
1158
+ <div class="container space-y">
1159
+ <h2 class="title txt-3">Menu Component</h2>
1160
+ <h4>Base Component</h4>
1161
+ <div class="bx grid md:cols-3">
1162
+ <div class="menu">
1163
+ <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
1164
+ <div class="menu-title">Menu Title</div>
1165
+ <a href="">Item</a>
1166
+ <a href="">Parent</a>
1167
+ <a href="" class="active">Active</a>
1168
+ <a href="" class="disabled">Disabled</a>
1526
1169
  </div>
1170
+ <nav class="menu">
1171
+ <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
1172
+ <div class="menu-title">Menu Title</div>
1173
+ <a href="">Item</a>
1174
+ <a href="">Parent</a>
1175
+ <a href="" class="active">Active</a>
1176
+ <a href="" class="disabled">Disabled</a>
1177
+ </nav>
1178
+ <ul class="menu">
1179
+ <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
1180
+ <div class="menu-title">Menu Title</div>
1181
+ <li><a href="">Item</a></li>
1182
+ <li><a href="">Parent</a></li>
1183
+ <li><a href="" class="active">Active</a></li>
1184
+ <li><a href="" class="disabled">Disabled</a></li>
1185
+ </ul>
1527
1186
  </div>
1528
- <div class="bx info flex">
1529
- <svg class="icon wh-3 fs0 mr-2">
1530
- <use xlink:href="/svg/naykel-ui.svg#info"></use>
1531
- </svg>
1532
- <div>
1533
- <div class="bx-title">Alert Title</div>
1534
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1187
+ <h4>With Menu-Item</h4>
1188
+ <div class="bx grid md:cols-3">
1189
+ <div class="menu">
1190
+ <div class="menu-title"><code>&lt;div class=&quot;menu&quot;&gt;</code></div>
1191
+ <div class="menu-title">Menu Title</div>
1192
+ <a class="menu-item" href="">Item</a>
1193
+ <a class="menu-item" href="">Parent</a>
1194
+ <a class="menu-item active" href="">Active</a>
1195
+ <a class="menu-item disabled" href="">Disabled</a>
1535
1196
  </div>
1197
+ <nav class="menu">
1198
+ <div class="menu-title"><code>&lt;nav class=&quot;menu&quot;&gt;</code></div>
1199
+ <div class="menu-title">Menu Title</div>
1200
+ <a class="menu-item" href="">Item</a>
1201
+ <a class="menu-item" href="">Parent</a>
1202
+ <a class="menu-item active" href="">Active</a>
1203
+ <a class="menu-item disabled" href="">Disabled</a>
1204
+ </nav>
1205
+ <ul class="menu">
1206
+ <div class="menu-title"><code>&lt;ul class=&quot;menu&quot;&gt;</code></div>
1207
+ <div class="menu-title">Menu Title</div>
1208
+ <li><a class="menu-item" href="">Item</a></li>
1209
+ <li><a class="menu-item" href="">Parent</a></li>
1210
+ <li><a class="menu-item active" href="">Active</a></li>
1211
+ <li><a class="menu-item disabled" href="">Disabled</a></li>
1212
+ </ul>
1536
1213
  </div>
1537
- <div class="bx info-light flex">
1538
- <svg class="icon wh-3 fs0 mr-2">
1539
- <use xlink:href="/svg/naykel-ui.svg#info"></use>
1540
- </svg>
1541
- <div>
1542
- <div class="bx-title">Alert Title</div>
1543
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1214
+ </section>
1215
+
1216
+ <section id="box" class="py-3">
1217
+ <div class="container">
1218
+ <h2>Boxes</h2>
1219
+ <div class="grid cols-3">
1220
+ <div class="bx">
1221
+ <div class="bx-title">Super Awesome Title</div>
1222
+ <p>Lorem ipsum dolor sit amet consectetur pepe adipisicing elit. Quas debitis unde aut, sed
1223
+ repellendus tempora, molestiae eveniet.</p>
1544
1224
  </div>
1545
1225
  </div>
1546
- <div class="bx success flex">
1547
- <svg class="icon wh-3 fs0 mr-2">
1548
- <use xlink:href="/svg/naykel-ui.svg#success"></use>
1549
- </svg>
1550
- <div>
1551
- <div class="bx-title">Alert Title</div>
1552
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1226
+ </div>
1227
+ </section>
1228
+ <section id="notifications" class="py-3">
1229
+ <div class="container">
1230
+ <div class="grid cols-3">
1231
+ <div class="bx pxy-1 flex va-c">
1232
+ <svg class="txt-green wh-2">
1233
+ <use xlink:href="svg/naykel-ui.svg#check-circle"></use>
1234
+ </svg>
1235
+ <div class="ml-075">Success message!</div>
1236
+ <button class="ml-auto">
1237
+ <svg class="icon">
1238
+ <use xlink:href="svg/naykel-ui.svg#x-mark"></use>
1239
+ </svg>
1240
+ </button>
1553
1241
  </div>
1554
1242
  </div>
1555
- <div class="bx success-light flex">
1556
- <svg class="icon wh-3 fs0 mr-2">
1557
- <use xlink:href="/svg/naykel-ui.svg#success"></use>
1558
- </svg>
1559
- <div>
1560
- <div class="bx-title">Alert Title</div>
1561
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1243
+ </div>
1244
+ </section>
1245
+ <section id="alignment-techniques" class="py-3">
1246
+ <div class="container">
1247
+ <h2>Alignment Techniques</h2>
1248
+ <div class="grid cols-3">
1249
+ <div class="bdr flex va-c">
1250
+ <div class="wh-3 pink"></div>
1251
+ <div class="wh-4 blue"></div>
1252
+ <div class="ml-auto wh-3 pink"></div>
1562
1253
  </div>
1563
- </div>
1564
- <div class="bx warning flex">
1565
- <svg class="icon wh-3 fs0 mr-2">
1566
- <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
1567
- </svg>
1568
- <div>
1569
- <div class="bx-title">Alert Title</div>
1570
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1254
+ <div class="bdr flex va-c">
1255
+ <span class="wh-3 pink"></span>
1256
+ <div class="fg1 wh-4 blue"></div>
1257
+ <span class="wh-3 pink"></span>
1571
1258
  </div>
1572
1259
  </div>
1573
- <div class="bx warning-light flex">
1574
- <svg class="icon wh-3 fs0 mr-2">
1575
- <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
1576
- </svg>
1260
+ </div>
1261
+ </section>
1262
+ <section id="typography" class="py-3">
1263
+ <div class="container">
1264
+ <h2 class="title mb-3">Typography</h2>
1265
+ <div class="grid-3 cols-2">
1266
+ <div id="headings">
1267
+ <h1>Heading 1</h1>
1268
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1269
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1270
+ <h2>Heading 2</h2>
1271
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1272
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1273
+ <h3>Heading 3</h3>
1274
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1275
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1276
+ <h4>Heading 4</h4>
1277
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1278
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1279
+ <h5>Heading 5</h5>
1280
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1281
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1282
+ <h6>Heading 6</h6>
1283
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam
1284
+ soluta harum beatae qui reiciendis possimus molestiae?</p>
1285
+ </div>
1577
1286
  <div>
1578
- <div class="bx-title">Alert Title</div>
1579
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1287
+ <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam
1288
+ quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae
1289
+ numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
1290
+
1291
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum
1292
+ laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam
1293
+ architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium
1294
+ quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum
1295
+ ipsam!</p>
1296
+
1297
+ <h3 class="title">Text Sizes</h3>
1298
+ <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1299
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1300
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1301
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
1302
+ <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1303
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1304
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1305
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
1306
+ <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
1307
+ delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam
1308
+ exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam
1309
+ deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
1310
+ <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1311
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1312
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1313
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
1314
+ <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus
1315
+ asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id
1316
+ similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et
1317
+ repudiandae, aliquam fugit? Eum, expedita officia!</p>
1580
1318
  </div>
1581
1319
  </div>
1582
1320
  </div>
1583
1321
  </section>
1322
+ </div>
1584
1323
 
1585
- <section id="tables">
1586
- <h2>Tables</h2>
1324
+ <!-- -->
1325
+ <!-- -->
1326
+ <!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
1327
+ <!-- -->
1328
+ <!-- -->
1329
+ <div class="container py-5">
1330
+ <div class="overflow-x-auto rounded-lg bdr">
1587
1331
  <table>
1588
- <thead>
1332
+ <thead class="txt-upper">
1589
1333
  <tr>
1590
- <th>Table Header</th>
1591
- <th>Table Header</th>
1592
- <th>Table Header</th>
1334
+ <th scope="col" class=""> Product name </th>
1335
+ <th scope="col" class=""> Color </th>
1336
+ <th scope="col" class=""> Category </th>
1337
+ <th scope="col" class=""> Price </th>
1338
+ <th scope="col" class=""> Action </th>
1593
1339
  </tr>
1594
1340
  </thead>
1595
- <tbody>
1596
- <tr>
1597
- <td>Table Data</td>
1598
- <td>Table Data</td>
1599
- <td>Table Data</td>
1341
+ <tbody class="divide-y bdr-t">
1342
+ <tr class="">
1343
+ <th scope="row" class=""> Apple MacBook Pro 17" </th>
1344
+ <td class=""> Silver </td>
1345
+ <td class=""> Laptop </td>
1346
+ <td class=""> $2999 </td>
1347
+ <td class=""> <a href="#">Edit</a> </td>
1600
1348
  </tr>
1349
+ <tr class="bdr-green bdr5">
1350
+ <th scope="row" class=""> Microsoft Surface Pro </th>
1351
+ <td class=""> White </td>
1352
+ <td class=""> Laptop PC </td>
1353
+ <td class=""> $1999 </td>
1354
+ <td class=""> <a href="#">Edit</a> </td>
1355
+ </tr>
1356
+ <tr class="">
1357
+ <th scope="row" class=""> Magic Mouse 2 </th>
1358
+ <td class=""> Black </td>
1359
+ <td class=""> Accessories </td>
1360
+ <td class=""> $99 </td>
1361
+ <td class=""> <a href="#">Edit</a> </td>
1362
+ </tr>
1363
+ <tr class="">
1364
+ <th scope="row" class=""> Google Pixel Phone </th>
1365
+ <td class=""> Gray </td>
1366
+ <td class=""> Phone </td>
1367
+ <td class=""> $799 </td>
1368
+ <td class=""> <a href="#">Edit</a> </td>
1369
+ </tr>
1370
+ <tr class="">
1371
+ <th scope="row" class=""> Apple Watch 5 </th>
1372
+ <td class=""> Red </td>
1373
+ <td class=""> Wearables </td>
1374
+ <td class=""> $999 </td>
1375
+ <td class=""> <a href="#">Edit</a> </td>
1376
+ </tr>
1377
+ </tbody>
1378
+ </table>
1379
+ </div>
1380
+ <hr>
1381
+ <div class="overflow-x-auto rounded-lg bdr">
1382
+ <table>
1383
+ <thead class="txt-upper">
1601
1384
  <tr>
1602
- <td>Table Data</td>
1603
- <td>Table Data</td>
1604
- <td>Table Data</td>
1385
+ <th scope="col" class=""> Product name </th>
1386
+ <th scope="col" class=""> Color </th>
1387
+ <th scope="col" class=""> Category </th>
1388
+ <th scope="col" class=""> Price </th>
1389
+ <th scope="col" class=""> Action </th>
1390
+ </tr>
1391
+ </thead>
1392
+ <tbody class="divide-y">
1393
+ <tr class="bdr-b bdr-light">
1394
+ <th scope="row" class=""> Apple MacBook Pro 17" </th>
1395
+ <td class=""> Silver </td>
1396
+ <td class=""> Laptop </td>
1397
+ <td class=""> $2999 </td>
1398
+ <td class=""> <a href="#">Edit</a> </td>
1399
+ </tr>
1400
+ <tr class="bdr-b bdr-light">
1401
+ <th scope="row" class=""> Microsoft Surface Pro </th>
1402
+ <td class=""> White </td>
1403
+ <td class=""> Laptop PC </td>
1404
+ <td class=""> $1999 </td>
1405
+ <td class=""> <a href="#">Edit</a> </td>
1605
1406
  </tr>
1407
+ <tr class="bdr-b bdr-light">
1408
+ <th scope="row" class=""> Magic Mouse 2 </th>
1409
+ <td class=""> Black </td>
1410
+ <td class=""> Accessories </td>
1411
+ <td class=""> $99 </td>
1412
+ <td class=""> <a href="#">Edit</a> </td>
1413
+ </tr>
1414
+ <tr class="bdr-b bdr-light">
1415
+ <th scope="row" class=""> Google Pixel Phone </th>
1416
+ <td class=""> Gray </td>
1417
+ <td class=""> Phone </td>
1418
+ <td class=""> $799 </td>
1419
+ <td class=""> <a href="#">Edit</a> </td>
1420
+ </tr>
1421
+ <tr class="bdr-blue-40">
1422
+ <th scope="row" class=""> Apple Watch 5 </th>
1423
+ <td class=""> Red </td>
1424
+ <td class=""> Wearables </td>
1425
+ <td class=""> $999 </td>
1426
+ <td class=""> <a href="#">Edit</a> </td>
1427
+ </tr>
1428
+ </tbody>
1429
+ </table>
1430
+ </div>
1431
+ <hr>
1432
+ <div class="overflow-x-auto rounded-lg">
1433
+ <table>
1434
+ <thead class="txt-upper txt-white bg-blue-600">
1606
1435
  <tr>
1607
- <td>Table Data</td>
1608
- <td>Table Data</td>
1609
- <td>Table Data</td>
1436
+ <th scope="col" class=""> Product name </th>
1437
+ <th scope="col" class=""> Color </th>
1438
+ <th scope="col" class=""> Category </th>
1439
+ <th scope="col" class=""> Price </th>
1440
+ <th scope="col" class=""> Action </th>
1441
+ </tr>
1442
+ </thead>
1443
+ <tbody>
1444
+ <tr class="bg-blue-500 bdr-b bdr-light">
1445
+ <th scope="row" class=""> Apple MacBook Pro 17" </th>
1446
+ <td class=""> Silver </td>
1447
+ <td class=""> Laptop </td>
1448
+ <td class=""> $2999 </td>
1449
+ <td class=""> <a href="#">Edit</a> </td>
1450
+ </tr>
1451
+ <tr class="bg-blue-500 bdr-b bdr-light">
1452
+ <th scope="row" class="">
1453
+ Microsoft Surface Pro
1454
+ </th>
1455
+ <td class=""> White </td>
1456
+ <td class=""> Laptop PC </td>
1457
+ <td class=""> $1999 </td>
1458
+ <td class=""> <a href="#">Edit</a> </td>
1459
+ </tr>
1460
+ <tr class="bg-blue-500 bdr-b bdr-light">
1461
+ <th scope="row" class=""> Magic Mouse 2 </th>
1462
+ <td class=""> Black </td>
1463
+ <td class=""> Accessories </td>
1464
+ <td class=""> $99 </td>
1465
+ <td class=""> <a href="#">Edit</a> </td>
1466
+ </tr>
1467
+ <tr class="bg-blue-500 bdr-b bdr-light">
1468
+ <th scope="row" class=""> Google Pixel Phone </th>
1469
+ <td class=""> Gray </td>
1470
+ <td class=""> Phone </td>
1471
+ <td class=""> $799 </td>
1472
+ <td class=""> <a href="#">Edit</a> </td>
1473
+ </tr>
1474
+ <tr class="bg-blue-500 bdr-blue-40">
1475
+ <th scope="row" class=""> Apple Watch 5 </th>
1476
+ <td class=""> Red </td>
1477
+ <td class=""> Wearables </td>
1478
+ <td class=""> $999 </td>
1479
+ <td class=""> <a href="#">Edit</a> </td>
1610
1480
  </tr>
1611
1481
  </tbody>
1612
1482
  </table>
1483
+ </div>
1484
+ </div>
1613
1485
 
1614
- </section>
1615
- </main>
1486
+ <div>
1487
+ <div class="quick-hide-wrapper zebra c-py-5-3-2">
1488
+ <section id="theme-examples">
1489
+ <div class="container">
1490
+ <h2 class="title txt-3">Basic Themes</h2>
1491
+ <h4>Base Colors</h4>
1492
+ <div class="grid-1 cols-6">
1493
+ <div class="pxy bdr-3 tac stone">stone</div>
1494
+ <div class="pxy bdr-3 tac brown">brown</div>
1495
+ <div class="pxy bdr-3 tac red">red</div>
1496
+ <div class="pxy bdr-3 tac orange">orange</div>
1497
+ <div class="pxy bdr-3 tac amber">amber</div>
1498
+ <div class="pxy bdr-3 tac yellow">yellow</div>
1499
+ <div class="pxy bdr-3 tac lime">lime</div>
1500
+ <div class="pxy bdr-3 tac emerald">emerald</div>
1501
+ <div class="pxy bdr-3 tac green">green</div>
1502
+ <div class="pxy bdr-3 tac teal">teal</div>
1503
+ <div class="pxy bdr-3 tac cyan">cyan</div>
1504
+ <div class="pxy bdr-3 tac sky">sky</div>
1505
+ <div class="pxy bdr-3 tac blue">blue</div>
1506
+ <div class="pxy bdr-3 tac indigo">indigo</div>
1507
+ <div class="pxy bdr-3 tac purple">purple</div>
1508
+ <div class="pxy bdr-3 tac fuchsia">fuchsia</div>
1509
+ <div class="pxy bdr-3 tac pink">pink</div>
1510
+ <div class="pxy bdr-3 tac rose">rose</div>
1511
+ </div>
1512
+ <h4>Theme Colors and Alert Colors</h4>
1513
+ <div class="grid cols-5">
1514
+ <div class="pxy bdr-3 tac primary">primary</div>
1515
+ <div class="pxy bdr-3 tac secondary">secondary</div>
1516
+ <div class="pxy bdr-3 tac accent">accent</div>
1517
+ <div class="pxy bdr-3 tac light">light</div>
1518
+ <div class="pxy bdr-3 tac dark">dark</div>
1519
+ <div class="pxy bdr-3 tac muted">muted</div>
1520
+ <div class="pxy bdr-3 tac danger">danger</div>
1521
+ <div class="pxy bdr-3 tac info">info</div>
1522
+ <div class="pxy bdr-3 tac success">success</div>
1523
+ <div class="pxy bdr-3 tac warning">warning</div>
1524
+ </div>
1525
+ </div>
1526
+ </section>
1527
+ <section id="theme-examples-with-state">
1528
+ <div class="container">
1529
+ <h2 class="title txt-3">Themes With State</h2>
1530
+ <h4>Base Colors</h4>
1531
+ <div class="grid-1 cols-6">
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>
1551
+ <h4>Theme Colors and Alert Colors</h4>
1552
+ <div class="grid cols-5">
1553
+ <div class="pxy bdr-3 tac withState primary">primary</div>
1554
+ <div class="pxy bdr-3 tac withState secondary">secondary</div>
1555
+ <div class="pxy bdr-3 tac withState accent">accent</div>
1556
+ <div class="pxy bdr-3 tac withState light">light</div>
1557
+ <div class="pxy bdr-3 tac withState dark">dark</div>
1558
+ <div class="pxy bdr-3 tac withState muted">muted</div>
1559
+ <div class="pxy bdr-3 tac withState danger">danger</div>
1560
+ <div class="pxy bdr-3 tac withState info">info</div>
1561
+ <div class="pxy bdr-3 tac withState success">success</div>
1562
+ <div class="pxy bdr-3 tac withState warning">warning</div>
1563
+ </div>
1564
+ </div>
1565
+ </section>
1616
1566
 
1617
- <footer id="nk-footer">
1618
-
1619
- </footer>
1620
-
1621
-
1622
- <section id="base-color-shades">
1623
- <div class="grid-0 cols-12 tac va-c">
1624
- <p class="tal">Stone</p>
1625
- <div class="py stone-1">1</div>
1626
- <div class="py stone-2">2</div>
1627
- <div class="py stone-3">3</div>
1628
- <div class="py stone-4">4</div>
1629
- <div class="py stone-5">5</div>
1630
- <div class="py stone-6">6</div>
1631
- <div class="py stone-7">7</div>
1632
- <div class="py stone-8">8</div>
1633
- <div class="py stone-9">9</div>
1634
- <div class="py stone-10">10</div>
1635
- <div class="py stone-11">11</div>
1636
- </div>
1637
- <div class="grid-0 cols-12 tac va-c">
1638
- <p class="tal">Brown</p>
1639
- <div class="py brown-1">1</div>
1640
- <div class="py brown-2">2</div>
1641
- <div class="py brown-3">3</div>
1642
- <div class="py brown-4">4</div>
1643
- <div class="py brown-5">5</div>
1644
- <div class="py brown-6">6</div>
1645
- <div class="py brown-7">7</div>
1646
- <div class="py brown-8">8</div>
1647
- <div class="py brown-9">9</div>
1648
- <div class="py brown-10">10</div>
1649
- <div class="py brown-11">11</div>
1650
- </div>
1651
- <div class="grid-0 cols-12 tac va-c">
1652
- <p class="tal">Red</p>
1653
- <div class="py red-1">1</div>
1654
- <div class="py red-2">2</div>
1655
- <div class="py red-3">3</div>
1656
- <div class="py red-4">4</div>
1657
- <div class="py red-5">5</div>
1658
- <div class="py red-6">6</div>
1659
- <div class="py red-7">7</div>
1660
- <div class="py red-8">8</div>
1661
- <div class="py red-9">9</div>
1662
- <div class="py red-10">10</div>
1663
- <div class="py red-11">11</div>
1664
1567
  </div>
1665
- <div class="grid-0 cols-12 tac va-c">
1666
- <p class="tal">Orange</p>
1667
- <div class="py orange-1">1</div>
1668
- <div class="py orange-2">2</div>
1669
- <div class="py orange-3">3</div>
1670
- <div class="py orange-4">4</div>
1671
- <div class="py orange-5">5</div>
1672
- <div class="py orange-6">6</div>
1673
- <div class="py orange-7">7</div>
1674
- <div class="py orange-8">8</div>
1675
- <div class="py orange-9">9</div>
1676
- <div class="py orange-10">10</div>
1677
- <div class="py orange-11">11</div>
1678
- </div>
1679
- <div class="grid-0 cols-12 tac va-c">
1680
- <p class="tal">Amber</p>
1681
- <div class="py amber-1">1</div>
1682
- <div class="py amber-2">2</div>
1683
- <div class="py amber-3">3</div>
1684
- <div class="py amber-4">4</div>
1685
- <div class="py amber-5">5</div>
1686
- <div class="py amber-6">6</div>
1687
- <div class="py amber-7">7</div>
1688
- <div class="py amber-8">8</div>
1689
- <div class="py amber-9">9</div>
1690
- <div class="py amber-10">10</div>
1691
- <div class="py amber-11">11</div>
1692
- </div>
1693
- <div class="grid-0 cols-12 tac va-c">
1694
- <p class="tal">Yellow</p>
1695
- <div class="py yellow-1">1</div>
1696
- <div class="py yellow-2">2</div>
1697
- <div class="py yellow-3">3</div>
1698
- <div class="py yellow-4">4</div>
1699
- <div class="py yellow-5">5</div>
1700
- <div class="py yellow-6">6</div>
1701
- <div class="py yellow-7">7</div>
1702
- <div class="py yellow-8">8</div>
1703
- <div class="py yellow-9">9</div>
1704
- <div class="py yellow-10">10</div>
1705
- <div class="py yellow-11">11</div>
1706
- </div>
1707
- <div class="grid-0 cols-12 tac va-c">
1708
- <p class="tal">Lime</p>
1709
- <div class="py lime-1">1</div>
1710
- <div class="py lime-2">2</div>
1711
- <div class="py lime-3">3</div>
1712
- <div class="py lime-4">4</div>
1713
- <div class="py lime-5">5</div>
1714
- <div class="py lime-6">6</div>
1715
- <div class="py lime-7">7</div>
1716
- <div class="py lime-8">8</div>
1717
- <div class="py lime-9">9</div>
1718
- <div class="py lime-10">10</div>
1719
- <div class="py lime-11">11</div>
1720
- </div>
1721
- <div class="grid-0 cols-12 tac va-c">
1722
- <p class="tal">Emerald</p>
1723
- <div class="py emerald-1">1</div>
1724
- <div class="py emerald-2">2</div>
1725
- <div class="py emerald-3">3</div>
1726
- <div class="py emerald-4">4</div>
1727
- <div class="py emerald-5">5</div>
1728
- <div class="py emerald-6">6</div>
1729
- <div class="py emerald-7">7</div>
1730
- <div class="py emerald-8">8</div>
1731
- <div class="py emerald-9">9</div>
1732
- <div class="py emerald-10">10</div>
1733
- <div class="py emerald-11">11</div>
1734
- </div>
1735
- <div class="grid-0 cols-12 tac va-c">
1736
- <p class="tal">Green</p>
1737
- <div class="py green-1">1</div>
1738
- <div class="py green-2">2</div>
1739
- <div class="py green-3">3</div>
1740
- <div class="py green-4">4</div>
1741
- <div class="py green-5">5</div>
1742
- <div class="py green-6">6</div>
1743
- <div class="py green-7">7</div>
1744
- <div class="py green-8">8</div>
1745
- <div class="py green-9">9</div>
1746
- <div class="py green-10">10</div>
1747
- <div class="py green-11">11</div>
1748
- </div>
1749
- <div class="grid-0 cols-12 tac va-c">
1750
- <p class="tal">Teal</p>
1751
- <div class="py teal-1">1</div>
1752
- <div class="py teal-2">2</div>
1753
- <div class="py teal-3">3</div>
1754
- <div class="py teal-4">4</div>
1755
- <div class="py teal-5">5</div>
1756
- <div class="py teal-6">6</div>
1757
- <div class="py teal-7">7</div>
1758
- <div class="py teal-8">8</div>
1759
- <div class="py teal-9">9</div>
1760
- <div class="py teal-10">10</div>
1761
- <div class="py teal-11">11</div>
1762
- </div>
1763
- <div class="grid-0 cols-12 tac va-c">
1764
- <p class="tal">Cyan</p>
1765
- <div class="py cyan-1">1</div>
1766
- <div class="py cyan-2">2</div>
1767
- <div class="py cyan-3">3</div>
1768
- <div class="py cyan-4">4</div>
1769
- <div class="py cyan-5">5</div>
1770
- <div class="py cyan-6">6</div>
1771
- <div class="py cyan-7">7</div>
1772
- <div class="py cyan-8">8</div>
1773
- <div class="py cyan-9">9</div>
1774
- <div class="py cyan-10">10</div>
1775
- <div class="py cyan-11">11</div>
1776
- </div>
1777
- <div class="grid-0 cols-12 tac va-c">
1778
- <p class="tal">Sky</p>
1779
- <div class="py sky-1">1</div>
1780
- <div class="py sky-2">2</div>
1781
- <div class="py sky-3">3</div>
1782
- <div class="py sky-4">4</div>
1783
- <div class="py sky-5">5</div>
1784
- <div class="py sky-6">6</div>
1785
- <div class="py sky-7">7</div>
1786
- <div class="py sky-8">8</div>
1787
- <div class="py sky-9">9</div>
1788
- <div class="py sky-10">10</div>
1789
- <div class="py sky-11">11</div>
1790
- </div>
1791
- <div class="grid-0 cols-12 tac va-c">
1792
- <p class="tal">Blue</p>
1793
- <div class="py blue-1">1</div>
1794
- <div class="py blue-2">2</div>
1795
- <div class="py blue-3">3</div>
1796
- <div class="py blue-4">4</div>
1797
- <div class="py blue-5">5</div>
1798
- <div class="py blue-6">6</div>
1799
- <div class="py blue-7">7</div>
1800
- <div class="py blue-8">8</div>
1801
- <div class="py blue-9">9</div>
1802
- <div class="py blue-10">10</div>
1803
- <div class="py blue-11">11</div>
1804
- </div>
1805
- <div class="grid-0 cols-12 tac va-c">
1806
- <p class="tal">Indigo</p>
1807
- <div class="py indigo-1">1</div>
1808
- <div class="py indigo-2">2</div>
1809
- <div class="py indigo-3">3</div>
1810
- <div class="py indigo-4">4</div>
1811
- <div class="py indigo-5">5</div>
1812
- <div class="py indigo-6">6</div>
1813
- <div class="py indigo-7">7</div>
1814
- <div class="py indigo-8">8</div>
1815
- <div class="py indigo-9">9</div>
1816
- <div class="py indigo-10">10</div>
1817
- <div class="py indigo-11">11</div>
1818
- </div>
1819
- <div class="grid-0 cols-12 tac va-c">
1820
- <p class="tal">Purple</p>
1821
- <div class="py purple-1">1</div>
1822
- <div class="py purple-2">2</div>
1823
- <div class="py purple-3">3</div>
1824
- <div class="py purple-4">4</div>
1825
- <div class="py purple-5">5</div>
1826
- <div class="py purple-6">6</div>
1827
- <div class="py purple-7">7</div>
1828
- <div class="py purple-8">8</div>
1829
- <div class="py purple-9">9</div>
1830
- <div class="py purple-10">10</div>
1831
- <div class="py purple-11">11</div>
1832
- </div>
1833
- <div class="grid-0 cols-12 tac va-c">
1834
- <p class="tal">Fuchsia</p>
1835
- <div class="py fuchsia-1">1</div>
1836
- <div class="py fuchsia-2">2</div>
1837
- <div class="py fuchsia-3">3</div>
1838
- <div class="py fuchsia-4">4</div>
1839
- <div class="py fuchsia-5">5</div>
1840
- <div class="py fuchsia-6">6</div>
1841
- <div class="py fuchsia-7">7</div>
1842
- <div class="py fuchsia-8">8</div>
1843
- <div class="py fuchsia-9">9</div>
1844
- <div class="py fuchsia-10">10</div>
1845
- <div class="py fuchsia-11">11</div>
1846
- </div>
1847
- <div class="grid-0 cols-12 tac va-c">
1848
- <p class="tal">Pink</p>
1849
- <div class="py pink-1">1</div>
1850
- <div class="py pink-2">2</div>
1851
- <div class="py pink-3">3</div>
1852
- <div class="py pink-4">4</div>
1853
- <div class="py pink-5">5</div>
1854
- <div class="py pink-6">6</div>
1855
- <div class="py pink-7">7</div>
1856
- <div class="py pink-8">8</div>
1857
- <div class="py pink-9">9</div>
1858
- <div class="py pink-10">10</div>
1859
- <div class="py pink-11">11</div>
1860
- </div>
1861
- <div class="grid-0 cols-12 tac va-c">
1862
- <p class="tal">Rose</p>
1863
- <div class="py rose-1">1</div>
1864
- <div class="py rose-2">2</div>
1865
- <div class="py rose-3">3</div>
1866
- <div class="py rose-4">4</div>
1867
- <div class="py rose-5">5</div>
1868
- <div class="py rose-6">6</div>
1869
- <div class="py rose-7">7</div>
1870
- <div class="py rose-8">8</div>
1871
- <div class="py rose-9">9</div>
1872
- <div class="py rose-10">10</div>
1873
- <div class="py rose-11">11</div>
1874
- </div>
1875
- </section>
1876
1568
 
1569
+ <main class="container maxw-lg c-py-3-2">
1570
+ <section>
1571
+ <h2>Theme Boxes</h2>
1572
+ <div class="grid cols-3 my">
1573
+ <div class="bx primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1574
+ debitis molestiae expedita reiciendis molestias.
1575
+ <a href="">Link</a>
1576
+ </div>
1577
+ <div class="bx secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1578
+ debitis molestiae expedita reiciendis molestias.
1579
+ <a href="">Link</a>
1580
+ </div>
1581
+ <div class="bx accent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nulla
1582
+ debitis molestiae expedita reiciendis molestias.
1583
+ <a href="">Link</a>
1584
+ </div>
1585
+ </div>
1586
+ </section>
1877
1587
 
1878
- <section id="tailwind-colors">
1879
- <div>
1880
- <div class="grid-0 cols-12 tac va-c">
1881
- <p class="tal">Slate</p>
1882
- <div class="h-4 bg-slate-50 tac">50</div>
1883
- <div class="h-4 bg-slate-100">100</div>
1884
- <div class="h-4 bg-slate-200">200</div>
1885
- <div class="h-4 bg-slate-300">300</div>
1886
- <div class="h-4 bg-slate-400">400</div>
1887
- <div class="h-4 bg-slate-500">500</div>
1888
- <div class="h-4 bg-slate-600">600</div>
1889
- <div class="h-4 bg-slate-700">700</div>
1890
- <div class="h-4 bg-slate-800">800</div>
1891
- <div class="h-4 bg-slate-900">900</div>
1892
- <div class="h-4 bg-slate-950">950</div>
1893
- </div>
1894
- </div>
1895
- <div>
1896
- <div class="grid-0 cols-12 tac va-c">
1897
- <p class="tal">Gray</p>
1898
- <div class="h-4 bg-gray-50">50</div>
1899
- <div class="h-4 bg-gray-100">100</div>
1900
- <div class="h-4 bg-gray-200">200</div>
1901
- <div class="h-4 bg-gray-300">300</div>
1902
- <div class="h-4 bg-gray-400">400</div>
1903
- <div class="h-4 bg-gray-500">500</div>
1904
- <div class="h-4 bg-gray-600">600</div>
1905
- <div class="h-4 bg-gray-700">700</div>
1906
- <div class="h-4 bg-gray-800">800</div>
1907
- <div class="h-4 bg-gray-900">900</div>
1908
- <div class="h-4 bg-gray-950">950</div>
1909
- </div>
1910
- </div>
1911
- <div>
1912
- <div class="grid-0 cols-12 tac va-c">
1913
- <p class="tal">Zinc</p>
1914
- <div class="h-4 bg-zinc-50">50</div>
1915
- <div class="h-4 bg-zinc-100">100</div>
1916
- <div class="h-4 bg-zinc-200">200</div>
1917
- <div class="h-4 bg-zinc-300">300</div>
1918
- <div class="h-4 bg-zinc-400">400</div>
1919
- <div class="h-4 bg-zinc-500">500</div>
1920
- <div class="h-4 bg-zinc-600">600</div>
1921
- <div class="h-4 bg-zinc-700">700</div>
1922
- <div class="h-4 bg-zinc-800">800</div>
1923
- <div class="h-4 bg-zinc-900">900</div>
1924
- <div class="h-4 bg-zinc-950">950</div>
1925
- </div>
1926
- </div>
1927
- <div>
1588
+ <article>
1589
+
1590
+
1591
+
1592
+ <div class="flex">
1593
+ <div>
1594
+ <ul class="w-10">
1595
+ <li>One</li>
1596
+ <li>Two</li>
1597
+ <li>Three</li>
1598
+ </ul>
1599
+ </div>
1600
+ <div>
1601
+ <ol class="w-10">
1602
+ <li>One</li>
1603
+ <li>Two</li>
1604
+ <li>Three</li>
1605
+ </ol>
1606
+ </div>
1607
+ <nav>
1608
+ <ul class="w-10">
1609
+ <li>Nav Item One</li>
1610
+ <li>Nav Item Two</li>
1611
+ <li>Nav Item Three</li>
1612
+ </ul>
1613
+ </nav>
1614
+ </div>
1615
+
1616
+ <ul>
1617
+ <li>Lorem ipsum dolor sit amet.</li>
1618
+ <li>Lorem ipsum dolor sit amet.</li>
1619
+ <li>Lorem ipsum dolor sit amet.</li>
1620
+ </ul>
1621
+ </article>
1622
+
1623
+ <section id="alerts">
1624
+ <h2>Alerts</h2>
1625
+ <div class="grid cols-2">
1626
+ <div class="bx danger flex">
1627
+ <svg class="icon wh-3 fs0 mr-2">
1628
+ <use xlink:href="/svg/naykel-ui.svg#warning"></use>
1629
+ </svg>
1630
+ <div>
1631
+ <div class="bx-title">Alert Title</div>
1632
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1633
+ </div>
1634
+ </div>
1635
+ <div class="bx danger-light flex">
1636
+ <svg class="icon wh-3 fs0 mr-2">
1637
+ <use xlink:href="/svg/naykel-ui.svg#warning"></use>
1638
+ </svg>
1639
+ <div>
1640
+ <div class="bx-title">Alert Title</div>
1641
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1642
+ </div>
1643
+ </div>
1644
+ <div class="bx info flex">
1645
+ <svg class="icon wh-3 fs0 mr-2">
1646
+ <use xlink:href="/svg/naykel-ui.svg#info"></use>
1647
+ </svg>
1648
+ <div>
1649
+ <div class="bx-title">Alert Title</div>
1650
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1651
+ </div>
1652
+ </div>
1653
+ <div class="bx info-light flex">
1654
+ <svg class="icon wh-3 fs0 mr-2">
1655
+ <use xlink:href="/svg/naykel-ui.svg#info"></use>
1656
+ </svg>
1657
+ <div>
1658
+ <div class="bx-title">Alert Title</div>
1659
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1660
+ </div>
1661
+ </div>
1662
+ <div class="bx success flex">
1663
+ <svg class="icon wh-3 fs0 mr-2">
1664
+ <use xlink:href="/svg/naykel-ui.svg#success"></use>
1665
+ </svg>
1666
+ <div>
1667
+ <div class="bx-title">Alert Title</div>
1668
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1669
+ </div>
1670
+ </div>
1671
+ <div class="bx success-light flex">
1672
+ <svg class="icon wh-3 fs0 mr-2">
1673
+ <use xlink:href="/svg/naykel-ui.svg#success"></use>
1674
+ </svg>
1675
+ <div>
1676
+ <div class="bx-title">Alert Title</div>
1677
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1678
+ </div>
1679
+ </div>
1680
+ <div class="bx warning flex">
1681
+ <svg class="icon wh-3 fs0 mr-2">
1682
+ <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
1683
+ </svg>
1684
+ <div>
1685
+ <div class="bx-title">Alert Title</div>
1686
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1687
+ </div>
1688
+ </div>
1689
+ <div class="bx warning-light flex">
1690
+ <svg class="icon wh-3 fs0 mr-2">
1691
+ <use xlink:href="/svg/naykel-ui.svg#warning-round"></use>
1692
+ </svg>
1693
+ <div>
1694
+ <div class="bx-title">Alert Title</div>
1695
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta.
1696
+ </div>
1697
+ </div>
1698
+ </div>
1699
+ </section>
1700
+
1701
+ <section id="tables">
1702
+ <h2>Tables</h2>
1703
+ <table>
1704
+ <thead>
1705
+ <tr>
1706
+ <th>Table Header</th>
1707
+ <th>Table Header</th>
1708
+ <th>Table Header</th>
1709
+ </tr>
1710
+ </thead>
1711
+ <tbody>
1712
+ <tr>
1713
+ <td>Table Data</td>
1714
+ <td>Table Data</td>
1715
+ <td>Table Data</td>
1716
+ </tr>
1717
+ <tr>
1718
+ <td>Table Data</td>
1719
+ <td>Table Data</td>
1720
+ <td>Table Data</td>
1721
+ </tr>
1722
+ <tr>
1723
+ <td>Table Data</td>
1724
+ <td>Table Data</td>
1725
+ <td>Table Data</td>
1726
+ </tr>
1727
+ </tbody>
1728
+ </table>
1729
+
1730
+ </section>
1731
+ </main>
1732
+
1733
+ <footer id="nk-footer">
1734
+
1735
+ </footer>
1736
+
1737
+
1738
+ <section id="base-color-shades">
1928
1739
  <div class="grid-0 cols-12 tac va-c">
1929
- <p class="tal">Neutral</p>
1930
- <div class="h-4 bg-neutral-50">50</div>
1931
- <div class="h-4 bg-neutral-100">100</div>
1932
- <div class="h-4 bg-neutral-200">200</div>
1933
- <div class="h-4 bg-neutral-300">300</div>
1934
- <div class="h-4 bg-neutral-400">400</div>
1935
- <div class="h-4 bg-neutral-500">500</div>
1936
- <div class="h-4 bg-neutral-600">600</div>
1937
- <div class="h-4 bg-neutral-700">700</div>
1938
- <div class="h-4 bg-neutral-800">800</div>
1939
- <div class="h-4 bg-neutral-900">900</div>
1940
- <div class="h-4 bg-neutral-950">950</div>
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>
1941
1752
  </div>
1942
- </div>
1943
- <div>
1944
1753
  <div class="grid-0 cols-12 tac va-c">
1945
- <p class="tal">Stone</p>
1946
- <div class="h-4 bg-stone-50">50</div>
1947
- <div class="h-4 bg-stone-100">100</div>
1948
- <div class="h-4 bg-stone-200">200</div>
1949
- <div class="h-4 bg-stone-300">300</div>
1950
- <div class="h-4 bg-stone-400">400</div>
1951
- <div class="h-4 bg-stone-500">500</div>
1952
- <div class="h-4 bg-stone-600">600</div>
1953
- <div class="h-4 bg-stone-700">700</div>
1954
- <div class="h-4 bg-stone-800">800</div>
1955
- <div class="h-4 bg-stone-900">900</div>
1956
- <div class="h-4 bg-stone-950">950</div>
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>
1957
1766
  </div>
1958
- </div>
1959
- <div>
1960
1767
  <div class="grid-0 cols-12 tac va-c">
1961
1768
  <p class="tal">Red</p>
1962
- <div class="h-4 bg-red-50">50</div>
1963
- <div class="h-4 bg-red-100">100</div>
1964
- <div class="h-4 bg-red-200">200</div>
1965
- <div class="h-4 bg-red-300">300</div>
1966
- <div class="h-4 bg-red-400">400</div>
1967
- <div class="h-4 bg-red-500">500</div>
1968
- <div class="h-4 bg-red-600">600</div>
1969
- <div class="h-4 bg-red-700">700</div>
1970
- <div class="h-4 bg-red-800">800</div>
1971
- <div class="h-4 bg-red-900">900</div>
1972
- <div class="h-4 bg-red-950">950</div>
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>
1973
1780
  </div>
1974
- </div>
1975
- <div>
1976
1781
  <div class="grid-0 cols-12 tac va-c">
1977
1782
  <p class="tal">Orange</p>
1978
- <div class="h-4 bg-orange-50">50</div>
1979
- <div class="h-4 bg-orange-100">100</div>
1980
- <div class="h-4 bg-orange-200">200</div>
1981
- <div class="h-4 bg-orange-300">300</div>
1982
- <div class="h-4 bg-orange-400">400</div>
1983
- <div class="h-4 bg-orange-500">500</div>
1984
- <div class="h-4 bg-orange-600">600</div>
1985
- <div class="h-4 bg-orange-700">700</div>
1986
- <div class="h-4 bg-orange-800">800</div>
1987
- <div class="h-4 bg-orange-900">900</div>
1988
- <div class="h-4 bg-orange-950">950</div>
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>
1989
1794
  </div>
1990
- </div>
1991
- <div>
1992
1795
  <div class="grid-0 cols-12 tac va-c">
1993
1796
  <p class="tal">Amber</p>
1994
- <div class="h-4 bg-amber-50">50</div>
1995
- <div class="h-4 bg-amber-100">100</div>
1996
- <div class="h-4 bg-amber-200">200</div>
1997
- <div class="h-4 bg-amber-300">300</div>
1998
- <div class="h-4 bg-amber-400">400</div>
1999
- <div class="h-4 bg-amber-500">500</div>
2000
- <div class="h-4 bg-amber-600">600</div>
2001
- <div class="h-4 bg-amber-700">700</div>
2002
- <div class="h-4 bg-amber-800">800</div>
2003
- <div class="h-4 bg-amber-900">900</div>
2004
- <div class="h-4 bg-amber-950">950</div>
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>
2005
1808
  </div>
2006
- </div>
2007
- <div>
2008
1809
  <div class="grid-0 cols-12 tac va-c">
2009
1810
  <p class="tal">Yellow</p>
2010
- <div class="h-4 bg-yellow-50">50</div>
2011
- <div class="h-4 bg-yellow-100">100</div>
2012
- <div class="h-4 bg-yellow-200">200</div>
2013
- <div class="h-4 bg-yellow-300">300</div>
2014
- <div class="h-4 bg-yellow-400">400</div>
2015
- <div class="h-4 bg-yellow-500">500</div>
2016
- <div class="h-4 bg-yellow-600">600</div>
2017
- <div class="h-4 bg-yellow-700">700</div>
2018
- <div class="h-4 bg-yellow-800">800</div>
2019
- <div class="h-4 bg-yellow-900">900</div>
2020
- <div class="h-4 bg-yellow-950">950</div>
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>
2021
1822
  </div>
2022
- </div>
2023
- <div>
2024
1823
  <div class="grid-0 cols-12 tac va-c">
2025
1824
  <p class="tal">Lime</p>
2026
- <div class="h-4 bg-lime-50">50</div>
2027
- <div class="h-4 bg-lime-100">100</div>
2028
- <div class="h-4 bg-lime-200">200</div>
2029
- <div class="h-4 bg-lime-300">300</div>
2030
- <div class="h-4 bg-lime-400">400</div>
2031
- <div class="h-4 bg-lime-500">500</div>
2032
- <div class="h-4 bg-lime-600">600</div>
2033
- <div class="h-4 bg-lime-700">700</div>
2034
- <div class="h-4 bg-lime-800">800</div>
2035
- <div class="h-4 bg-lime-900">900</div>
2036
- <div class="h-4 bg-lime-950">950</div>
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>
2037
1836
  </div>
2038
- </div>
2039
- <div>
2040
1837
  <div class="grid-0 cols-12 tac va-c">
2041
- <p class="tal">Green</p>
2042
- <div class="h-4 bg-green-50">50</div>
2043
- <div class="h-4 bg-green-100">100</div>
2044
- <div class="h-4 bg-green-200">200</div>
2045
- <div class="h-4 bg-green-300">300</div>
2046
- <div class="h-4 bg-green-400">400</div>
2047
- <div class="h-4 bg-green-500">500</div>
2048
- <div class="h-4 bg-green-600">600</div>
2049
- <div class="h-4 bg-green-700">700</div>
2050
- <div class="h-4 bg-green-800">800</div>
2051
- <div class="h-4 bg-green-900">900</div>
2052
- <div class="h-4 bg-green-950">950</div>
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>
2053
1850
  </div>
2054
- </div>
2055
- <div>
2056
1851
  <div class="grid-0 cols-12 tac va-c">
2057
- <p class="tal">Emerald</p>
2058
- <div class="h-4 bg-emerald-50">50</div>
2059
- <div class="h-4 bg-emerald-100">100</div>
2060
- <div class="h-4 bg-emerald-200">200</div>
2061
- <div class="h-4 bg-emerald-300">300</div>
2062
- <div class="h-4 bg-emerald-400">400</div>
2063
- <div class="h-4 bg-emerald-500">500</div>
2064
- <div class="h-4 bg-emerald-600">600</div>
2065
- <div class="h-4 bg-emerald-700">700</div>
2066
- <div class="h-4 bg-emerald-800">800</div>
2067
- <div class="h-4 bg-emerald-900">900</div>
2068
- <div class="h-4 bg-emerald-950">950</div>
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>
2069
1864
  </div>
2070
- </div>
2071
- <div>
2072
1865
  <div class="grid-0 cols-12 tac va-c">
2073
1866
  <p class="tal">Teal</p>
2074
- <div class="h-4 bg-teal-50">50</div>
2075
- <div class="h-4 bg-teal-100">100</div>
2076
- <div class="h-4 bg-teal-200">200</div>
2077
- <div class="h-4 bg-teal-300">300</div>
2078
- <div class="h-4 bg-teal-400">400</div>
2079
- <div class="h-4 bg-teal-500">500</div>
2080
- <div class="h-4 bg-teal-600">600</div>
2081
- <div class="h-4 bg-teal-700">700</div>
2082
- <div class="h-4 bg-teal-800">800</div>
2083
- <div class="h-4 bg-teal-900">900</div>
2084
- <div class="h-4 bg-teal-950">950</div>
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>
2085
1878
  </div>
2086
- </div>
2087
- <div>
2088
1879
  <div class="grid-0 cols-12 tac va-c">
2089
1880
  <p class="tal">Cyan</p>
2090
- <div class="h-4 bg-cyan-50">50</div>
2091
- <div class="h-4 bg-cyan-100">100</div>
2092
- <div class="h-4 bg-cyan-200">200</div>
2093
- <div class="h-4 bg-cyan-300">300</div>
2094
- <div class="h-4 bg-cyan-400">400</div>
2095
- <div class="h-4 bg-cyan-500">500</div>
2096
- <div class="h-4 bg-cyan-600">600</div>
2097
- <div class="h-4 bg-cyan-700">700</div>
2098
- <div class="h-4 bg-cyan-800">800</div>
2099
- <div class="h-4 bg-cyan-900">900</div>
2100
- <div class="h-4 bg-cyan-950">950</div>
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>
2101
1892
  </div>
2102
- </div>
2103
- <div>
2104
1893
  <div class="grid-0 cols-12 tac va-c">
2105
1894
  <p class="tal">Sky</p>
2106
- <div class="h-4 bg-sky-50">50</div>
2107
- <div class="h-4 bg-sky-100">100</div>
2108
- <div class="h-4 bg-sky-200">200</div>
2109
- <div class="h-4 bg-sky-300">300</div>
2110
- <div class="h-4 bg-sky-400">400</div>
2111
- <div class="h-4 bg-sky-500">500</div>
2112
- <div class="h-4 bg-sky-600">600</div>
2113
- <div class="h-4 bg-sky-700">700</div>
2114
- <div class="h-4 bg-sky-800">800</div>
2115
- <div class="h-4 bg-sky-900">900</div>
2116
- <div class="h-4 bg-sky-950">950</div>
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>
2117
1906
  </div>
2118
- </div>
2119
- <div>
2120
1907
  <div class="grid-0 cols-12 tac va-c">
2121
1908
  <p class="tal">Blue</p>
2122
- <div class="h-4 bg-blue-50">50</div>
2123
- <div class="h-4 bg-blue-100">100</div>
2124
- <div class="h-4 bg-blue-200">200</div>
2125
- <div class="h-4 bg-blue-300">300</div>
2126
- <div class="h-4 bg-blue-400">400</div>
2127
- <div class="h-4 bg-blue-500">500</div>
2128
- <div class="h-4 bg-blue-600">600</div>
2129
- <div class="h-4 bg-blue-700">700</div>
2130
- <div class="h-4 bg-blue-800">800</div>
2131
- <div class="h-4 bg-blue-900">900</div>
2132
- <div class="h-4 bg-blue-950">950</div>
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>
2133
1920
  </div>
2134
- </div>
2135
- <div>
2136
1921
  <div class="grid-0 cols-12 tac va-c">
2137
1922
  <p class="tal">Indigo</p>
2138
- <div class="h-4 bg-indigo-50">50</div>
2139
- <div class="h-4 bg-indigo-100">100</div>
2140
- <div class="h-4 bg-indigo-200">200</div>
2141
- <div class="h-4 bg-indigo-300">300</div>
2142
- <div class="h-4 bg-indigo-400">400</div>
2143
- <div class="h-4 bg-indigo-500">500</div>
2144
- <div class="h-4 bg-indigo-600">600</div>
2145
- <div class="h-4 bg-indigo-700">700</div>
2146
- <div class="h-4 bg-indigo-800">800</div>
2147
- <div class="h-4 bg-indigo-900">900</div>
2148
- <div class="h-4 bg-indigo-950">950</div>
2149
- </div>
2150
- </div>
2151
- <div>
2152
- <div class="grid-0 cols-12 tac va-c">
2153
- <p class="tal">Violet</p>
2154
- <div class="h-4 bg-violet-50">50</div>
2155
- <div class="h-4 bg-violet-100">100</div>
2156
- <div class="h-4 bg-violet-200">200</div>
2157
- <div class="h-4 bg-violet-300">300</div>
2158
- <div class="h-4 bg-violet-400">400</div>
2159
- <div class="h-4 bg-violet-500">500</div>
2160
- <div class="h-4 bg-violet-600">600</div>
2161
- <div class="h-4 bg-violet-700">700</div>
2162
- <div class="h-4 bg-violet-800">800</div>
2163
- <div class="h-4 bg-violet-900">900</div>
2164
- <div class="h-4 bg-violet-950">950</div>
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>
2165
1934
  </div>
2166
- </div>
2167
- <div>
2168
1935
  <div class="grid-0 cols-12 tac va-c">
2169
1936
  <p class="tal">Purple</p>
2170
- <div class="h-4 bg-purple-50">50</div>
2171
- <div class="h-4 bg-purple-100">100</div>
2172
- <div class="h-4 bg-purple-200">200</div>
2173
- <div class="h-4 bg-purple-300">300</div>
2174
- <div class="h-4 bg-purple-400">400</div>
2175
- <div class="h-4 bg-purple-500">500</div>
2176
- <div class="h-4 bg-purple-600">600</div>
2177
- <div class="h-4 bg-purple-700">700</div>
2178
- <div class="h-4 bg-purple-800">800</div>
2179
- <div class="h-4 bg-purple-900">900</div>
2180
- <div class="h-4 bg-purple-950">950</div>
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>
2181
1948
  </div>
2182
- </div>
2183
- <div>
2184
1949
  <div class="grid-0 cols-12 tac va-c">
2185
1950
  <p class="tal">Fuchsia</p>
2186
- <div class="h-4 bg-fuchsia-50">50</div>
2187
- <div class="h-4 bg-fuchsia-100">100</div>
2188
- <div class="h-4 bg-fuchsia-200">200</div>
2189
- <div class="h-4 bg-fuchsia-300">300</div>
2190
- <div class="h-4 bg-fuchsia-400">400</div>
2191
- <div class="h-4 bg-fuchsia-500">500</div>
2192
- <div class="h-4 bg-fuchsia-600">600</div>
2193
- <div class="h-4 bg-fuchsia-700">700</div>
2194
- <div class="h-4 bg-fuchsia-800">800</div>
2195
- <div class="h-4 bg-fuchsia-900">900</div>
2196
- <div class="h-4 bg-fuchsia-950">950</div>
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>
2197
1962
  </div>
2198
- </div>
2199
- <div>
2200
1963
  <div class="grid-0 cols-12 tac va-c">
2201
1964
  <p class="tal">Pink</p>
2202
- <div class="h-4 bg-pink-50">50</div>
2203
- <div class="h-4 bg-pink-100">100</div>
2204
- <div class="h-4 bg-pink-200">200</div>
2205
- <div class="h-4 bg-pink-300">300</div>
2206
- <div class="h-4 bg-pink-400">400</div>
2207
- <div class="h-4 bg-pink-500">500</div>
2208
- <div class="h-4 bg-pink-600">600</div>
2209
- <div class="h-4 bg-pink-700">700</div>
2210
- <div class="h-4 bg-pink-800">800</div>
2211
- <div class="h-4 bg-pink-900">900</div>
2212
- <div class="h-4 bg-pink-950">950</div>
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>
2213
1976
  </div>
2214
- </div>
2215
- <div>
2216
1977
  <div class="grid-0 cols-12 tac va-c">
2217
1978
  <p class="tal">Rose</p>
2218
- <div class="h-4 bg-rose-50">50</div>
2219
- <div class="h-4 bg-rose-100">100</div>
2220
- <div class="h-4 bg-rose-200">200</div>
2221
- <div class="h-4 bg-rose-300">300</div>
2222
- <div class="h-4 bg-rose-400">400</div>
2223
- <div class="h-4 bg-rose-500">500</div>
2224
- <div class="h-4 bg-rose-600">600</div>
2225
- <div class="h-4 bg-rose-700">700</div>
2226
- <div class="h-4 bg-rose-800">800</div>
2227
- <div class="h-4 bg-rose-900">900</div>
2228
- <div class="h-4 bg-rose-950">950</div>
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>
2229
1990
  </div>
2230
- </div>
2231
- </section>
1991
+ </section>
2232
1992
 
2233
- </div>
2234
- <div id="app"></div>
2235
- <script type="module" src="/main.js"></script>
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
+ </div>
2350
+ <div id="app"></div>
2351
+ <script type="module" src="/main.js"></script>
2236
2352
  </body>
2237
2353
 
2238
2354
  </html>