44<head >
55 <meta charset =" utf-8" >
66 <meta name =" viewport" content =" width=device-width, initial-scale=1" >
7- <script src =" https://cdn.tailwindcss.com " ></script >
7+ <script src =" https://cdn.jsdelivr.net/npm/ @tailwindcss /browser@4 " ></script >
88
99 <
script defer src =
" https://cdn.jsdelivr.net/npm/@ryangjchandler /[email protected] /dist/cdn.min.js" ></
script >
1010 <link rel =" stylesheet" href =" https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.min.css" />
2626
2727<body class =" " >
2828
29- <div class =" grid grid-cols-1 divide-x md:grid-cols-3 *:h-60" >
29+ <div class =" grid grid-cols-1 divide-x divide-gray-200 *:h-60 md:grid-cols-3 " >
3030
3131 <div class =" isolate flex flex-col" >
3232 <div class =" p-3" >
3333 <h1 class =" font-semibold" >Button</h1 >
3434 </div >
35- <div class =" flex grow items-center justify-center border-b" >
35+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
3636 <x-kit::button color =" white" class =" rounded-md ring-1 ring-inset" >
3737 Button
3838 </x-kit::button >
4343 <div class =" p-3" >
4444 <h1 class =" font-semibold" >Button File</h1 >
4545 </div >
46- <div class =" flex grow items-center justify-center border-b" >
46+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
4747 <x-kit::button .file name =" upload" color =" white" class =" rounded-md ring-1 ring-inset" >
4848 <x-slot:icon >
4949 <iconify-icon icon =" heroicons:arrow-up-tray" ></iconify-icon >
5757 <div class =" p-3" >
5858 <h1 class =" font-semibold" >Button Copy</h1 >
5959 </div >
60- <div class =" flex grow items-center justify-center border-b" >
60+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
6161 <x-kit::button .copy tooltip =" Copy" tooltip-checked =" Copied" copy =" Foo" color =" white"
6262 class =" rounded-md ring-1 ring-inset" >
6363 <x-slot:icon >
@@ -75,7 +75,7 @@ class="rounded-md ring-1 ring-inset">
7575 <div class =" p-3" >
7676 <h1 class =" font-semibold" >Tag</h1 >
7777 </div >
78- <div class =" flex grow items-center justify-center border-b" >
78+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
7979 <x-kit::tag color =" white" class =" rounded-full ring-1 ring-inset" >
8080 Tag
8181 <x-slot:button >
@@ -93,7 +93,7 @@ class="rounded-md ring-1 ring-inset">
9393 <div class =" p-3" >
9494 <h1 class =" font-semibold" >Popover</h1 >
9595 </div >
96- <div class =" flex grow items-center justify-center border-b" >
96+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
9797 <x-kit::popover class =" " >
9898 <x-kit::button class =" rounded-md ring-1 ring-inset" color =" white" x-ref =" trigger"
9999 x-on:click.stop =" open = !open" >
@@ -105,10 +105,11 @@ class="rounded-md ring-1 ring-inset">
105105
106106 <x-kit::popover .content class =" z-20 p-3 md:p-0" x-anchor.bottom-end.offset.5 =" $refs.trigger"
107107 x-transition.origin.top =" " >
108- <div class =" mt-auto flex w-full flex-col rounded-lg border bg-white shadow-lg md:max-w-72" >
108+ <div
109+ class =" mt-auto flex w-full flex-col rounded-lg border border-gray-200 bg-white shadow-lg md:max-w-72" >
109110
110111 <div class =" p-1" >
111- <x-kit::input .parent color =" gray" class =" rounded-md outline-0! ring-1 ring-inset" >
112+ <x-kit::input .parent color =" gray" class =" outline-0! rounded-md ring-1 ring-inset" >
112113 <x-kit::input size =" sm" color =" transparent" placeholder =" Search" >
113114 <x-slot:icon >
114115 <iconify-icon icon =" heroicons:magnifying-glass" ></iconify-icon >
@@ -141,7 +142,7 @@ class="rounded-md ring-1 ring-inset">
141142 <p class =" px-2.5 py-0.5 text-sm font-semibold" >
142143 Recent
143144 </p >
144- <span class =" grow border-b" ></span >
145+ <span class =" grow border-b border-gray-200 " ></span >
145146 </div >
146147
147148 <div class =" flex max-h-full flex-col gap-0.5 overflow-auto p-1 md:max-h-56" >
@@ -179,7 +180,7 @@ class="rounded-md ring-1 ring-inset">
179180 <div class =" p-3" >
180181 <h1 class =" font-semibold" >Select</h1 >
181182 </div >
182- <div class =" flex grow items-center justify-center border-b" >
183+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
183184 <x-kit::select color =" white" class =" rounded ring-1 ring-inset" >
184185 <option >
185186 Option 1
@@ -192,8 +193,19 @@ class="rounded-md ring-1 ring-inset">
192193 <div class =" p-3" >
193194 <h1 class =" font-semibold" >Switch</h1 >
194195 </div >
195- <div class =" flex grow items-center justify-center border-b" >
196- <x-kit::switch color =" white" >
196+ <div class =" flex grow items-center justify-center border-b border-gray-200" >
197+ <x-kit::switch >
198+ Switch
199+ </x-kit::switch >
200+ </div >
201+ </div >
202+
203+ <div class =" isolate flex flex-col" >
204+ <div class =" p-3" >
205+ <h1 class =" font-semibold" >Disabled Switch</h1 >
206+ </div >
207+ <div class =" flex grow items-center justify-center border-b border-gray-200" >
208+ <x-kit::switch disabled checked >
197209 Switch
198210 </x-kit::switch >
199211 </div >
@@ -203,7 +215,7 @@ class="rounded-md ring-1 ring-inset">
203215 <div class =" p-3" >
204216 <h1 class =" font-semibold" >Input</h1 >
205217 </div >
206- <div class =" flex grow items-center justify-center border-b" >
218+ <div class =" flex grow items-center justify-center border-b border-gray-200 " >
207219 <x-kit::input .parent color =" gray" class =" rounded-md ring-1 ring-inset" >
208220 <x-kit::input color =" transparent" placeholder =" Search" >
209221 <x-slot:icon >
0 commit comments