<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sira-ui/tailwind/dist/css/styles.css" />
<script src="https://cdn.tailwindcss.com"></script>
<body class="flex flex-col gap-6 px-20 transition-all duration-300">
<div class="flex gap-6 items-center sticky top-0 p-4 bg-bw-50 z-10 ground-glass" id="title">
<h1 class="text-6xl font-bold">Sira-UI Test Experiments Playground</h1>
<button class="flex gap-2 items-center btn bg-gradient-to-r from-rose-500 to-fuchsia-500 text-white" id="theme-toggle" onclick="toggleDarkMode()">
Click to toggle theme ☀
</button>
</div>
<div class="grid grid-cols-5 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Colors</h1>
<div class="grid gap-4">
<div class="p-4 rounded-lg bg-bw-50">bw-50</div>
<div class="p-4 rounded-lg bg-bw-100">bw-100</div>
<div class="p-4 rounded-lg bg-bw-200">bw-200</div>
<div class="p-4 rounded-lg bg-bw-300">bw-300</div>
<div class="p-4 rounded-lg bg-bw-400">bw-400</div>
<div class="p-4 rounded-lg bg-bw-500">bw-500</div>
<div class="p-4 rounded-lg bg-bw-600">bw-600</div>
<div class="p-4 rounded-lg bg-bw-700">bw-700</div>
<div class="p-4 rounded-lg bg-bw-800 text-bw-50">bw-800</div>
<div class="p-4 rounded-lg bg-bw-900 text-bw-50">bw-900</div>
<div class="p-4 rounded-lg bg-bw-1000 text-bw-50">bw-1000</div>
<div class="p-4 rounded-lg bg-bw-1100 text-bw-50">bw-1100</div>
</div>
<div class="grid gap-4">
<div class="p-4 rounded-lg bg-info-50">info-50</div>
<div class="p-4 rounded-lg bg-info-100">info-100</div>
<div class="p-4 rounded-lg bg-info-200">info-200</div>
<div class="p-4 rounded-lg bg-info-300">info-300</div>
<div class="p-4 rounded-lg bg-info-400">info-400</div>
<div class="p-4 rounded-lg bg-info-500">info-500</div>
<div class="p-4 rounded-lg bg-info-600">info-600</div>
<div class="p-4 rounded-lg bg-info-700">info-700</div>
<div class="p-4 rounded-lg bg-info-800 text-bw-50">info-800</div>
<div class="p-4 rounded-lg bg-info-900 text-bw-50">info-900</div>
<div class="p-4 rounded-lg bg-info-1000 text-bw-50">info-1000</div>
<div class="p-4 rounded-lg bg-info-1100 text-bw-50">info-1100</div>
</div>
<div class="grid gap-4">
<div class="p-4 rounded-lg bg-success-50">success-50</div>
<div class="p-4 rounded-lg bg-success-100">success-100</div>
<div class="p-4 rounded-lg bg-success-200">success-200</div>
<div class="p-4 rounded-lg bg-success-300">success-300</div>
<div class="p-4 rounded-lg bg-success-400">success-400</div>
<div class="p-4 rounded-lg bg-success-500">success-500</div>
<div class="p-4 rounded-lg bg-success-600">success-600</div>
<div class="p-4 rounded-lg bg-success-700">success-700</div>
<div class="p-4 rounded-lg bg-success-800 text-bw-50">success-800</div>
<div class="p-4 rounded-lg bg-success-900 text-bw-50">success-900</div>
<div class="p-4 rounded-lg bg-success-1000 text-bw-50">success-1000</div>
<div class="p-4 rounded-lg bg-success-1100 text-bw-50">success-1100</div>
</div>
<div class="grid gap-4">
<div class="p-4 rounded-lg bg-warn-50">warn-50</div>
<div class="p-4 rounded-lg bg-warn-100">warn-100</div>
<div class="p-4 rounded-lg bg-warn-200">warn-200</div>
<div class="p-4 rounded-lg bg-warn-300">warn-300</div>
<div class="p-4 rounded-lg bg-warn-400">warn-400</div>
<div class="p-4 rounded-lg bg-warn-500">warn-500</div>
<div class="p-4 rounded-lg bg-warn-600">warn-600</div>
<div class="p-4 rounded-lg bg-warn-700">warn-700</div>
<div class="p-4 rounded-lg bg-warn-800 text-bw-50">warn-800</div>
<div class="p-4 rounded-lg bg-warn-900 text-bw-50">warn-900</div>
<div class="p-4 rounded-lg bg-warn-1000 text-bw-50">warn-1000</div>
<div class="p-4 rounded-lg bg-warn-1100 text-bw-50">warn-1100</div>
</div>
<div class="grid gap-4">
<div class="p-4 rounded-lg bg-danger-50">danger-50</div>
<div class="p-4 rounded-lg bg-danger-100">danger-100</div>
<div class="p-4 rounded-lg bg-danger-200">danger-200</div>
<div class="p-4 rounded-lg bg-danger-300">danger-300</div>
<div class="p-4 rounded-lg bg-danger-400">danger-400</div>
<div class="p-4 rounded-lg bg-danger-500">danger-500</div>
<div class="p-4 rounded-lg bg-danger-600">danger-600</div>
<div class="p-4 rounded-lg bg-danger-700">danger-700</div>
<div class="p-4 rounded-lg bg-danger-800 text-bw-50">danger-800</div>
<div class="p-4 rounded-lg bg-danger-900 text-bw-50">danger-900</div>
<div class="p-4 rounded-lg bg-danger-1000 text-bw-50">danger-1000</div>
<div class="p-4 rounded-lg bg-danger-1100 text-bw-50">danger-1100</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Button</h1>
<div class="">
<h2 class="text-xl">Colors</h2>
<div class="grid gap-4">
<button class="btn solid bw">BW</button>
<button class="btn solid info">Info</button>
<button class="btn solid success">Success</button>
<button class="btn solid warn">Warn</button>
<button class="btn solid danger">Danger</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Outline</h2>
<div class="grid gap-4">
<button class="btn outline bw">BW</button>
<button class="btn outline info">Info</button>
<button class="btn outline success">Success</button>
<button class="btn outline warn">Warn</button>
<button class="btn outline danger">Danger</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Ghost</h2>
<div class="grid gap-4">
<button class="btn ghost bw">BW</button>
<button class="btn ghost info">Info</button>
<button class="btn ghost success">Success</button>
<button class="btn ghost warn">Warn</button>
<button class="btn ghost danger">Danger</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Light</h2>
<div class="grid gap-4">
<button class="btn light bw">BW</button>
<button class="btn light info">Info</button>
<button class="btn light success">Success</button>
<button class="btn light warn">Warn</button>
<button class="btn light danger">Danger</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Sizes</h2>
<div class="grid gap-4 place-content-start place-items-start">
<button class="btn solid success xs">A XS Button</button>
<button class="btn solid success sm">A SM Button</button>
<button class="btn solid success md">A MD Button</button>
<button class="btn solid success lg">A LG Button</button>
<button class="btn solid success xl">A XL Button</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Group</h2>
<div class="grid gap-4">
<div class="btn-group scrollable success">
<button class="btn solid">success</button>
<button class="btn solid">scrollable</button>
<button class="btn solid">success</button>
<button class="btn solid">group</button>
</div>
<div class="btn-group scrollable vertical success">
<button class="btn solid">vertical</button>
<button class="btn solid">scrollable</button>
<button class="btn solid">btn</button>
<button class="btn solid">success</button>
</div>
<div class="btn-group scrollable pill success">
<button class="btn solid">success</button>
<button class="btn solid">success</button>
<button class="btn solid">success</button>
<button class="btn solid">success</button>
</div>
<div class="btn-group scrollable warn">
<button class="btn solid">warn</button>
<button class="btn solid">scrollable</button>
<button class="btn solid active">active</button>
<button class="btn solid">group</button>
</div>
<div class="btn-group scrollable danger">
<input class="btn solid" data-content="1" name="options" type="radio" />
<input class="btn solid" data-content="2" name="options" type="radio" />
<input class="btn solid" data-content="3" name="options" type="radio" />
<input class="btn solid" data-content="4" name="options" type="radio" />
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Loading</h2>
<div class="grid gap-4 place-content-start place-items-start">
<button class="btn solid success is-loading">is-loading</button>
<button class="btn outline success is-loading">is-loading</button>
<button class="btn solid success is-loading xs">is-loading</button>
<button class="btn solid success is-loading sm">is-loading</button>
<button class="btn solid success is-loading md">is-loading</button>
<button class="btn solid success is-loading lg">is-loading</button>
<button class="btn solid success is-loading xl">is-loading</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Compact</h2>
<div class="grid gap-4 place-content-start place-items-start">
<button class="btn solid success compact xs">🎉</button>
<button class="btn solid success compact sm">🎉</button>
<button class="btn solid success compact">🎉</button>
<button class="btn solid success compact lg">🎉</button>
<button class="btn solid success compact xl">🎉</button>
</div>
</div>
<div class="">
<h2 class="text-xl">Others</h2>
<div class="grid gap-4 place-content-start place-items-start">
<button class="btn solid success" disabled>disabled</button>
<button class="btn solid success pill">A Pill Button</button>
<button class="btn solid success">A 🎉 Button</button>
<button class="btn solid success">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-plus-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
<path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor"></path>
</svg>
<p>Left Icon Button</p>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-5 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Avatar</h1>
<div class="">
<h2 class="text-xl">Shape</h2>
<div class="grid grid-cols-2 gap-4">
<div class="avatar">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar square">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Ring</h2>
<div class="grid grid-cols-3 gap-4">
<div class="avatar ring bw">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar ring info">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar ring success">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar ring warn">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar ring danger">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="flex gap-4">
<div class="avatar xs">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar sm">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar md">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar lg">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar xl">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Group</h2>
<div class="avatar-group">
<div class="avatar">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar info">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar success">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar warn">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
<div class="avatar danger">
<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Text</h2>
<div class="grid grid-cols-4 gap-4">
<div class="avatar info">
<div>RV</div>
</div>
<div class="avatar success">
<div>RV</div>
</div>
<div class="avatar ring warn">
<div>+000</div>
</div>
<div class="avatar danger">
<div>Some Things Cool</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Badge</h1>
<div class="">
<h2 class="text-xl">Shape</h2>
<div class="flex gap-4">
<div class="badge solid success">badge</div>
<div class="badge solid success cornered">cornered</div>
<div class="badge solid success square">square</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Solid</h2>
<div class="grid gap-4">
<div class="badge solid bw">BW</div>
<div class="badge solid info">info</div>
<div class="badge solid success">success</div>
<div class="badge solid warn">warn</div>
<div class="badge solid danger">danger</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Outline</h2>
<div class="grid gap-4">
<div class="badge outline bw">BW</div>
<div class="badge outline info">info</div>
<div class="badge outline success">success</div>
<div class="badge outline warn">warn</div>
<div class="badge outline danger">danger</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Light</h2>
<div class="grid gap-4">
<div class="badge light bw">BW</div>
<div class="badge light info">info</div>
<div class="badge light success">success</div>
<div class="badge light warn">warn</div>
<div class="badge light danger">danger</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4 grid-flow-col grid-cols-3 grid-rows-5">
<div class="badge solid success xs">size-xs</div>
<div class="badge solid success sm">size-sm</div>
<div class="badge solid success md">size-md</div>
<div class="badge solid success lg">size-lg</div>
<div class="badge solid success xl">size-xl</div>
<div class="badge solid success xs cornered">size-xs</div>
<div class="badge solid success sm cornered">size-sm</div>
<div class="badge solid success md cornered">size-md</div>
<div class="badge solid success lg cornered">size-lg</div>
<div class="badge solid success xl cornered">size-xl</div>
<div class="badge solid success xs square">size-xs</div>
<div class="badge solid success sm square">size-sm</div>
<div class="badge solid success md square">size-md</div>
<div class="badge solid success lg square">size-lg</div>
<div class="badge solid success xl square">size-xl</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Slot</h2>
<div class="grid gap-4">
<div class="badge light danger">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-plus-filled" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
<path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor"></path>
</svg>
<p>Left Icon Badge</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Input</h1>
<div class="">
<h2 class="text-xl">Colors</h2>
<div class="grid gap-4">
<input class="input bw" placeholder="bw" />
<input class="input info" placeholder="info" />
<input class="input success" placeholder="success" />
<input class="input warn" placeholder="warn" />
<input class="input danger" placeholder="danger" />
</div>
</div>
<div class="">
<h2 class="text-xl">Solid</h2>
<div class="grid gap-4">
<input class="input solid bw" placeholder="bw" />
<input class="input solid info" placeholder="info" />
<input class="input solid success" placeholder="success" />
<input class="input solid warn" placeholder="warn" />
<input class="input solid danger" placeholder="danger" />
</div>
</div>
<div class="">
<h2 class="text-xl">Outline</h2>
<div class="grid gap-4">
<input class="input outline bw" placeholder="bw" />
<input class="input outline info" placeholder="info" />
<input class="input outline success" placeholder="success" />
<input class="input outline warn" placeholder="warn" />
<input class="input outline danger" placeholder="danger" />
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4">
<input class="input success xs" placeholder="xs" />
<input class="input success sm" placeholder="sm" />
<input class="input success md" placeholder="md" />
<input class="input success lg" placeholder="lg" />
<input class="input success xl" placeholder="xl" />
</div>
</div>
<div class="">
<h2 class="text-xl">Slot</h2>
<div class="grid gap-4">
<div class="input info">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<input placeholder="with slot" />
</div>
<div class="input danger">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<input placeholder="with slot" />
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</div>
<div class="input success solid">
<div>Username</div>
<div class="is-divider"></div>
<input placeholder="with slot" />
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Others</h2>
<div class="grid gap-4">
<input class="input success" placeholder="hi,this is the placeholder" />
<input class="input success pill" placeholder="pill" />
<input class="input success" disabled placeholder="disabled" />
<textarea class="input success" placeholder="textarea"></textarea>
</div>
</div>
</div>
<div class="grid gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Loader</h1>
<div class="">
<h2 class="text-xl">Type</h2>
<div class="flex items-center gap-4">
<div class="loader bw">
<div class="bar-bounce"></div>
</div>
<div class="loader bw">
<div class="spin"></div>
</div>
<div class="loader bw">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw">
<div class="flow-cross"></div>
</div>
<div class="loader bw">
<div class="ping-wave"></div>
</div>
<div class="loader bw">
<div class="dot-flash"></div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="flex gap-4">
<div class="loader bw">
<div class="bar-bounce"></div>
</div>
<div class="loader info">
<div class="bar-bounce"></div>
</div>
<div class="loader success">
<div class="bar-bounce"></div>
</div>
<div class="loader warn">
<div class="bar-bounce"></div>
</div>
<div class="loader danger">
<div class="bar-bounce"></div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid grid-cols-5 place-items-center gap-4">
<div class="loader bw xs">
<div class="spin"></div>
</div>
<div class="loader bw sm">
<div class="spin"></div>
</div>
<div class="loader bw">
<div class="spin"></div>
</div>
<div class="loader bw lg">
<div class="spin"></div>
</div>
<div class="loader bw xl">
<div class="spin"></div>
</div>
<div class="loader bw xs">
<div class="bar-bounce"></div>
</div>
<div class="loader bw sm">
<div class="bar-bounce"></div>
</div>
<div class="loader bw">
<div class="bar-bounce"></div>
</div>
<div class="loader bw lg">
<div class="bar-bounce"></div>
</div>
<div class="loader bw xl">
<div class="bar-bounce"></div>
</div>
<div class="loader bw xs">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw sm">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw lg">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw xl">
<div class="bar-shake-y"></div>
</div>
<div class="loader bw xs">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw sm">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw lg">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw xl">
<div class="bar-shake-x"></div>
</div>
<div class="loader bw xs">
<div class="flow-cross"></div>
</div>
<div class="loader bw sm">
<div class="flow-cross"></div>
</div>
<div class="loader bw">
<div class="flow-cross"></div>
</div>
<div class="loader bw lg">
<div class="flow-cross"></div>
</div>
<div class="loader bw xl">
<div class="flow-cross"></div>
</div>
<div class="loader bw xs">
<div class="ping-wave"></div>
</div>
<div class="loader bw sm">
<div class="ping-wave"></div>
</div>
<div class="loader bw">
<div class="ping-wave"></div>
</div>
<div class="loader bw lg">
<div class="ping-wave"></div>
</div>
<div class="loader bw xl">
<div class="ping-wave"></div>
</div>
<div class="loader bw xs">
<div class="dot-flash"></div>
</div>
<div class="loader bw sm">
<div class="dot-flash"></div>
</div>
<div class="loader bw">
<div class="dot-flash"></div>
</div>
<div class="loader bw lg">
<div class="dot-flash"></div>
</div>
<div class="loader bw xl">
<div class="dot-flash"></div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-7 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Switch</h1>
<div class="">
<h2 class="text-xl">Colors</h2>
<div class="grid gap-4">
<input checked class="switch bw" type="checkbox" />
<input checked class="switch info" type="checkbox" />
<input checked class="switch success" type="checkbox" />
<input checked class="switch warn" type="checkbox" />
<input checked class="switch danger" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">bordered</h2>
<div class="grid gap-4">
<input class="switch bordered bw" type="checkbox" />
<input class="switch bordered info" type="checkbox" />
<input class="switch bordered success" type="checkbox" />
<input class="switch bordered warn" type="checkbox" />
<input class="switch bordered danger" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">ghost</h2>
<div class="grid gap-4">
<input class="switch ghost bw" type="checkbox" />
<input class="switch ghost info" type="checkbox" />
<input class="switch ghost success" type="checkbox" />
<input class="switch ghost warn" type="checkbox" />
<input class="switch ghost danger" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4">
<input checked class="switch success xs" type="checkbox" />
<input checked class="switch success sm" type="checkbox" />
<input checked class="switch success md" type="checkbox" />
<input checked class="switch success lg" type="checkbox" />
<input checked class="switch success xl" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Shape</h2>
<div class="grid gap-4">
<input checked class="switch success xs square" type="checkbox" />
<input checked class="switch success sm square" type="checkbox" />
<input checked class="switch success md square" type="checkbox" />
<input checked class="switch success lg square" type="checkbox" />
<input checked class="switch success xl square" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Disabled</h2>
<div class="grid gap-4">
<input class="switch success" disabled type="checkbox" />
<input checked class="switch success" disabled type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Custom content</h2>
<div class="grid gap-4">
<input checked class="switch success xs" data-content="✓" type="checkbox" />
<input checked class="switch success sm" data-content="a" type="checkbox" />
<input checked class="switch success md" data-content="★" type="checkbox" />
<input checked class="switch success lg" data-content="☀" type="checkbox" />
<input checked class="switch success xl" data-content="💪" type="checkbox" />
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Tabs</h1>
<div class="">
<h2 class="text-xl">Colors</h2>
<div class="grid gap-4">
<div class="tabs bw">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs info">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs success">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs warn">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs danger">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">ghost</h2>
<div class="grid gap-4">
<div class="tabs danger ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs success ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs success">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2 ghost">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs warn ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs success ghost left">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs warn ghost right">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">bordered</h2>
<div class="grid gap-4">
<div class="tabs danger bordered">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs success bordered">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs success">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4 bordered">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs warn">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4 bordered">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">ghost + bordered</h2>
<div class="grid gap-4">
<div class="tabs bw bordered ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs danger bordered ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs info bordered ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs success bordered ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs warn bordered ghost">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs success bordered ghost left">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
<div class="tabs warn bordered ghost right">
<div class="tab p-2">Tab 1</div>
<div class="tab p-2">Tab 2</div>
<div class="tab active p-2">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">pill</h2>
<div class="grid gap-4">
<div class="tabs bw pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs info pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs success pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs danger pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs success pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs warn pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs danger pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">boxed</h2>
<div class="grid gap-4">
<div class="tabs boxed bw pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed info pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed success pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed success">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed warn">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed danger pill">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">dir</h2>
<div class="grid gap-4">
<div class="tabs bordered success bottom">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs bordered success left">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs bordered success right">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed success pill bottom">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed success pill left">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
<div class="tabs boxed success pill right">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab active p-4">Tab 3</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Accordion</h1>
<div class="col-span-full">
<h2 class="text-xl">Colors</h2>
<div class="flex gap-4">
<div class="accordion-group info">
<div class="accordion">
<input class="toggle" id="accordion-color-info-1" type="checkbox" />
<label class="title" for="accordion-color-info-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-color-info-2" type="checkbox" />
<label class="title" for="accordion-color-info-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
<div class="accordion-group success">
<div class="accordion">
<input class="toggle" id="accordion-color-success-1" type="checkbox" />
<label class="title" for="accordion-color-success-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-color-success-2" type="checkbox" />
<label class="title" for="accordion-color-success-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
<div class="accordion-group warn">
<div class="accordion">
<input class="toggle" id="accordion-color-warn-1" type="checkbox" />
<label class="title" for="accordion-color-warn-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-color-warn-2" type="checkbox" />
<label class="title" for="accordion-color-warn-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
<div class="accordion-group danger">
<div class="accordion">
<input class="toggle" id="accordion-color-danger-1" type="checkbox" />
<label class="title" for="accordion-color-danger-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-color-danger-2" type="checkbox" />
<label class="title" for="accordion-color-danger-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
<div class="accordion-group bw">
<div class="accordion">
<input class="toggle" id="accordion-color-bw-1" type="checkbox" />
<label class="title" for="accordion-color-bw-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-color-bw-2" type="checkbox" />
<label class="title" for="accordion-color-bw-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-4">
<h2 class="text-xl">Bordered</h2>
<div class="grid gap-4">
<div class="accordion-group bordered bw">
<div class="accordion">
<input class="toggle" id="accordion-bordered-bw-1" type="checkbox" />
<label class="title" for="accordion-bordered-bw-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-bordered-bw-2" type="checkbox" />
<label class="title" for="accordion-bordered-bw-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
<div class="accordion-group bordered success">
<div class="accordion">
<input class="toggle" id="accordion-bordered-success-1" type="checkbox" />
<label class="title" for="accordion-bordered-success-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-bordered-success-2" type="checkbox" />
<label class="title" for="accordion-bordered-success-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-4">
<h2 class="text-xl">Focusable</h2>
<div class="flex gap-4">
<div class="accordion-group bw">
<div class="accordion" tabindex="0">
<label class="title">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion" tabindex="0">
<label class="title">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-4">
<h2 class="text-xl">Force open</h2>
<div class="flex gap-4">
<div class="accordion-group bw">
<div class="accordion open">
<input class="toggle" id="accordion-fo-bw-1" type="checkbox" />
<label class="title" for="accordion-fo-bw-1">Toggle Accordion 1</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
<div class="accordion">
<input class="toggle" id="accordion-fo-bw-2" type="checkbox" />
<label class="title" for="accordion-fo-bw-2">Toggle Accordion 2</label>
<div class="content">
<div class="min-h-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem
placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-5 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Prompt</h1>
<div class="">
<h2 class="text-xl">Type</h2>
<div class="grid gap-4">
<div class="prompt success">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt warn outline">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt danger ghost">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Colors</h2>
<div class="grid gap-4">
<div class="prompt info">
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt success">
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt warn">
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt danger">
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt bw">
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Shape</h2>
<div class="grid gap-4">
<div class="prompt success">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
<div class="prompt warn square">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Title</h2>
<div class="grid gap-4">
<div class="prompt success">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4">
<div class="prompt success xs">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
<div class="prompt success sm">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
<div class="prompt success md">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
<div class="prompt success lg">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
<div class="prompt success xl">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
</div>
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="icon">
<svg class="inline w-6 h-6 fill-current" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g data-v-2d0d7d62="">
<rect data-v-2d0d7d62="" fill="none" height="24" width="24"></rect>
</g>
<g data-v-2d0d7d62="">
<g data-v-2d0d7d62=""></g>
<g data-v-2d0d7d62="">
<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5"></circle>
<path d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z" data-v-2d0d7d62=""></path>
<path d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z" data-v-2d0d7d62=""></path>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Breadcrumbs</h1>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="grid gap-4">
<div class="breadcrumbs bw">
<ul>
<li>
<a>Home</a>
</li>
<li>
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
<div class="breadcrumbs info">
<ul>
<li>
<a>Home</a>
</li>
<li>
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
<div class="breadcrumbs success">
<ul>
<li>
<a>Home</a>
</li>
<li>
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
<div class="breadcrumbs warn">
<ul>
<li>
<a>Home</a>
</li>
<li>
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
<div class="breadcrumbs danger">
<ul>
<li>
<a>Home</a>
</li>
<li>
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Force active</h2>
<div class="grid gap-4">
<div class="breadcrumbs danger">
<ul>
<li>
<a>Home</a>
</li>
<li class="active">
<a>Library</a>
</li>
<li>Add Data</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Checkbox</h1>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="flex gap-4">
<input checked class="bw checkbox" type="checkbox" />
<input checked class="info checkbox" type="checkbox" />
<input checked class="success checkbox" type="checkbox" />
<input checked class="warn checkbox" type="checkbox" />
<input checked class="danger checkbox" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="flex gap-4">
<input checked class="success checkbox xs" type="checkbox" />
<input checked class="success checkbox sm" type="checkbox" />
<input checked class="success checkbox" type="checkbox" />
<input checked class="success checkbox lg" type="checkbox" />
<input checked class="success checkbox xl" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Colored</h2>
<div class="flex gap-4">
<input checked class="bw checkbox colored" type="checkbox" />
<input class="info checkbox colored" type="checkbox" />
<input class="success checkbox colored" type="checkbox" />
<input checked class="warn checkbox colored" type="checkbox" />
<input class="danger checkbox colored" type="checkbox" />
</div>
</div>
<div class="">
<h2 class="text-xl">Disabled</h2>
<div class="flex gap-4">
<input checked class="success checkbox" disabled type="checkbox" />
<input class="success checkbox" disabled type="checkbox" />
<input checked class="danger checkbox" disabled type="checkbox" />
<input class="danger checkbox" disabled type="checkbox" />
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Drawer</h1>
<script>
function toggleDrawer(name) {
let ele = document.getElementById(`drawer-${name}`);
console.debug('toggleDrawer', name, ele);
let show = ele.classList.contains('show');
if (show) {
ele.classList.remove('show');
} else {
ele.classList.add('show');
}
}
</script>
<div class="">
<h2 class="text-xl">Position</h2>
<div class="flex gap-4">
<div>
<label class="btn solid danger w-fit" onclick="toggleDrawer('left')">Open left</label>
<label class="drawer-overlay" onclick="toggleDrawer('left')"></label>
<div class="drawer left" id="drawer-left">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('left')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit" onclick="toggleDrawer('right')">Open right</label>
<label class="drawer-overlay" onclick="toggleDrawer('right')"></label>
<div class="drawer right" id="drawer-right">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('right')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit" onclick="toggleDrawer('top')">Open top</label>
<label class="drawer-overlay" onclick="toggleDrawer('top')"></label>
<div class="drawer top" id="drawer-top">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('top')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit" onclick="toggleDrawer('bottom')">Open bottom</label>
<label class="drawer-overlay" onclick="toggleDrawer('bottom')"></label>
<div class="drawer bottom" id="drawer-bottom">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('bottom')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('toggle-overlay-click-not-close')">Overlay click not close</label>
<label class="drawer-overlay"></label>
<div class="drawer left" id="drawer-toggle-overlay-click-not-close">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('toggle-overlay-click-not-close')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('no-overlay')">No overlay</label>
<div class="drawer left" id="drawer-no-overlay">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('no-overlay')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
<div>
<label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('pause-scroll')">pause-scroll</label>
<label class="drawer-overlay" onclick="toggleDrawer('pause-scroll')"></label>
<div class="drawer left pause-scroll" id="drawer-pause-scroll">
<div class="content flex flex-col h-full">
<label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('pause-scroll')">✕</label>
<h2 class="text-xl">Your content</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Dropdown</h1>
<div class="col-span-full">
<h2 class="text-xl">Position</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="dropdown bw">
<label class="btn solid" tabindex="0">bottom</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">bottom-left</label>
<div class="menu bottom-left">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">bottom-right</label>
<div class="menu bottom-right">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">top</label>
<div class="menu top">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">top-left</label>
<div class="menu top-left">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">top-right</label>
<div class="menu top-right">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">left</label>
<div class="menu left">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">right</label>
<div class="menu right">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">left-top</label>
<div class="menu left-top">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">right-top</label>
<div class="menu right-top">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">left-bottom</label>
<div class="menu left-bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">right-bottom</label>
<div class="menu right-bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Color</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="dropdown info">
<label class="btn solid" tabindex="0">info</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown success">
<label class="btn solid" tabindex="0">success</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown warn">
<label class="btn solid" tabindex="0">warn</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown danger">
<label class="btn solid" tabindex="0">danger</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Others</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="dropdown success">
<label class="btn solid" tabindex="0">divider</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<div class="is-divider" role="separator"></div>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown bw">
<label class="btn solid" tabindex="0">subtitle</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<div class="is-divider" role="separator"></div>
<a class="subtitle">Settings</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown success">
<label class="btn solid" tabindex="0">subtitle</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<div class="is-divider" role="separator"></div>
<a class="subtitle">Settings</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
</div>
</div>
<div class="dropdown success">
<label class="btn solid" tabindex="0">Icon</label>
<div class="menu bottom">
<a class="item text-sm">Profile</a>
<div class="is-divider" role="separator"></div>
<a class="subtitle">Settings</a>
<a class="item text-sm" tabindex="-1">Account settings</a>
<a class="item text-sm" tabindex="-1">Subscriptions</a>
<a class="item text-sm" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-plus-filled" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
<path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor"></path>
</svg>
<p>Left Icon Item</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Modal</h1>
<script>
function toggleModal(num) {
let ele = document.getElementById(`modal-${num}`);
console.debug('toggleModal', num, ele);
let show = ele.classList.contains('show');
if (show) {
ele.classList.remove('show');
} else {
ele.classList.add('show');
}
}
</script>
<div class="col-span-full">
<h2 class="text-xl">Default</h2>
<div class="flex gap-4">
<div>
<label class="btn success solid" onclick="toggleModal(1)">Open modal-1</label>
<label class="modal-overlay" onclick="toggleModal(1)"></label>
<div class="modal flex flex-col gap-5" id="modal-1">
<button class="absolute right-4 top-3" onclick="toggleModal(1)">✕</button>
<h2 class="text-xl">Modal title 1</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta.
Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis
iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn solid danger flex-1">Delete</button>
<button class="btn solid bw flex-1" onclick="toggleModal(1)">Cancel</button>
</div>
</div>
</div>
<div>
<label class="btn success solid" onclick="toggleModal('pause-scroll')">Open modal pause-scroll</label>
<label class="modal-overlay" onclick="toggleModal('pause-scroll')"></label>
<div class="modal pause-scroll flex flex-col gap-5" id="modal-pause-scroll">
<button class="absolute right-4 top-3" onclick="toggleModal('pause-scroll')">✕</button>
<h2 class="text-xl">Modal title</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta.
Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis
iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn solid danger flex-1">Delete</button>
<button class="btn solid bw flex-1" onclick="toggleModal('pause-scroll')">Cancel</button>
</div>
</div>
</div>
<div>
<label class="btn success solid" onclick="toggleModal('custom-size')">Open custom-size modal</label>
<label class="modal-overlay" onclick="toggleModal('custom-size')"></label>
<div class="modal flex flex-col gap-5 w-2/3 h-[40vh]" id="modal-custom-size">
<button class="absolute right-4 top-3" onclick="toggleModal('custom-size')">✕</button>
<h2 class="text-xl">Modal title</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta.
Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis
iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn solid danger flex-1">Delete</button>
<button class="btn solid bw flex-1" onclick="toggleModal('custom-size')">Cancel</button>
</div>
</div>
</div>
<div>
<label class="btn success solid" onclick="toggleModal('no-overlay')">Open modal no overlay</label>
<div class="modal flex flex-col gap-5" id="modal-no-overlay">
<button class="absolute right-4 top-3" onclick="toggleModal('no-overlay')">✕</button>
<h2 class="text-xl">Modal title</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta.
Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis
iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn solid danger flex-1">Delete</button>
<button class="btn solid bw flex-1" onclick="toggleModal('no-overlay')">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Radio</h1>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="flex gap-4">
<input checked class="radio info" name="radio-color" type="radio" />
<input checked class="radio success" name="radio-color" type="radio" />
<input checked class="radio warn" name="radio-color" type="radio" />
<input checked class="radio danger" name="radio-color" type="radio" />
<input checked class="radio bw" name="radio-color" type="radio" />
</div>
</div>
<div class="">
<h2 class="text-xl">Colored</h2>
<div class="flex gap-4">
<input checked class="radio colored info" name="radio-colored" type="radio" />
<input checked class="radio colored success" name="radio-colored" type="radio" />
<input checked class="radio colored warn" name="radio-colored" type="radio" />
<input checked class="radio colored danger" name="radio-colored" type="radio" />
<input checked class="radio colored bw" name="radio-colored" type="radio" />
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="flex gap-4">
<input checked class="radio colored warn xs" type="radio" />
<input checked class="radio colored warn sm" type="radio" />
<input checked class="radio colored warn md" type="radio" />
<input checked class="radio colored warn lg" type="radio" />
<input checked class="radio colored warn xl" type="radio" />
</div>
</div>
</div>
<div class="grid grid-cols-5 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Select</h1>
<div class="">
<h2 class="text-xl">Default</h2>
<div class="grid gap-4">
<select class="select bw">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select info">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select warn">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select danger">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="">
<h2 class="text-xl">Solid</h2>
<div class="grid gap-4">
<select class="select solid info">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select solid success">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select solid warn">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select solid danger">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select solid bw">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="">
<h2 class="text-xl">Ghost</h2>
<div class="grid gap-4">
<select class="select ghost info">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select ghost success">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select ghost warn">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select ghost danger">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select ghost bw">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4">
<select class="select success xs">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success sm">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success md">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success lg">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success xl">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="">
<h2 class="text-xl">Other</h2>
<div class="grid gap-4">
<select class="select success pill">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success" disabled>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select success">
<option disabled selected value>-- select an option --</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Table</h1>
<div class="col-span-full">
<h2 class="text-xl">Color</h2>
<div class="grid grid-cols-2 gap-4">
<table class="table info">
<thead>
<tr>
<th>Type</th>
<th>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-plus-filled" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
<path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor"></path>
</svg>
<p>Left Icon</p>
</div>
</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table success">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table bw">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Bordered</h2>
<div class="grid grid-cols-2 gap-4">
<table class="table bordered info">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table bordered success">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table bordered warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table bordered danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table bordered bw">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Zebra</h2>
<div class="grid grid-cols-2 gap-4">
<table class="table zebra warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table zebra danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Compact</h2>
<div class="grid grid-cols-2 gap-4">
<table class="table compact warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<table class="table compact danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Tooltip</h1>
<div class="col-span-full">
<h2 class="text-xl">Position</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<span class="tooltip bw top" data-tooltip="hello">
<button class="btn solid">top</button>
</span>
<span class="tooltip bw bottom" data-tooltip="hello">
<button class="btn solid">bottom</button>
</span>
<span class="tooltip bw left" data-tooltip="hello">
<button class="btn solid">left</button>
</span>
<span class="tooltip bw right" data-tooltip="hello">
<button class="btn solid">right</button>
</span>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Color</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<span class="tooltip top" data-tooltip="hello">
<button class="btn solid">default</button>
</span>
<span class="tooltip bw top" data-tooltip="hello">
<button class="btn solid">bw</button>
</span>
<span class="tooltip info top" data-tooltip="hello">
<button class="btn solid">info</button>
</span>
<span class="tooltip success top" data-tooltip="hello">
<button class="btn solid">success</button>
</span>
<span class="tooltip warn top" data-tooltip="hello">
<button class="btn solid">warn</button>
</span>
<span class="tooltip danger top" data-tooltip="hello">
<button class="btn solid">danger</button>
</span>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Others</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<span class="tooltip bw top show" data-tooltip="hello">
<button class="btn solid">force show</button>
</span>
<span class="tooltip bw top click-show" data-tooltip="hello">
<button class="btn solid">click-show</button>
</span>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Link</h1>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="flex gap-4">
<a class="link">link</a>
<a class="link text-bw-800">link with bw</a>
<a class="link text-info-800">link with info</a>
<a class="link text-success-800">link with success</a>
<a class="link text-warn-800">link with warn</a>
<a class="link text-danger-800">link with danger</a>
</div>
</div>
<div class="">
<h2 class="text-xl">Ghost</h2>
<div class="flex gap-4">
<a class="link ghost">link</a>
<a class="link ghost bw">link with bw</a>
<a class="link ghost info">link with info</a>
<a class="link ghost success">link with success</a>
<a class="link ghost warn">link with warn</a>
<a class="link ghost danger">link with danger</a>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Steps</h1>
<div class="">
<h2 class="text-xl">horizontal</h2>
<div class="grid gap-4">
<div class="steps success top">
<div class="step">Register</div>
<div class="step">Choose plan</div>
<div class="step">Purchase</div>
<div class="step">Receive Product</div>
</div>
<div class="steps danger bottom">
<div class="step">Register</div>
<div class="step active-point">Choose plan</div>
<div class="step active">Purchase</div>
<div class="step">Receive Product</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">vertical</h2>
<div class="flex gap-4">
<div class="steps success left">
<div class="step active">Register</div>
<div class="step active">Choose plan</div>
<div class="step active">Purchase</div>
<div class="step">Receive Product</div>
</div>
<div class="steps danger right">
<div class="step">Register</div>
<div class="step">Choose plan</div>
<div class="step">Purchase</div>
<div class="step">Receive Product</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">shape</h2>
<div class="flex gap-4">
<div class="steps info left">
<div class="step square active">Register</div>
<div class="step square active">Choose plan</div>
<div class="step square">Purchase</div>
<div class="step square">Receive Product</div>
</div>
<div class="steps danger right">
<div class="step cornered active">Register</div>
<div class="step cornered active">Choose plan</div>
<div class="step cornered">Purchase</div>
<div class="step cornered">Receive Product</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-xl">Content</h2>
<div class="grid gap-4">
<div class="steps success left">
<div class="step active" data-content="✓">Checked</div>
<div class="step active" data-content="">Empty</div>
<div class="step" data-content="★">Star</div>
<div class="step" data-content="●">circle</div>
<div class="step" data-content="💪">emoji</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 p-4 has-border overflow-hidden rounded-xl">
<h1 class="text-3xl col-span-full">Divider</h1>
<div class="">
<h2 class="text-xl">horizontal</h2>
<div class="grid gap-4">
<div class="divider"></div>
<div class="divider"></div>
<div class="divider">Divider</div>
<div class="divider">
<div class="loader bw xs">
<div class="spin"></div>
</div>
Loading
</div>
</div>
</div>
<div class="flex flex-col">
<h2 class="text-xl">vertical</h2>
<div class="flex-1 grid grid-cols-4 gap-4">
<div class="divider vertical"></div>
<div class="divider vertical"></div>
<div class="divider vertical">Divider</div>
<div class="divider vertical">
<div class="loader bw xs">
<div class="spin"></div>
</div>
Loading
</div>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Popover</h1>
<div class="col-span-full">
<h2 class="text-xl">Position</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="popover">
<label class="trigger btn solid" tabindex="0">Click</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">bottom-center</label>
<div class="content bottom-center" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">bottom-left</label>
<div class="content bottom-left" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">bottom-right</label>
<div class="content bottom-right" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">top-center</label>
<div class="content top-center" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">top-left</label>
<div class="content top-left" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">top-right</label>
<div class="content top-right" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">left</label>
<div class="content left" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">left-top</label>
<div class="content left-top" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">left-bottom</label>
<div class="content left-bottom" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">right</label>
<div class="content right" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">right-top</label>
<div class="content right-top" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
<div class="popover">
<label class="trigger btn solid" tabindex="0">right-bottom</label>
<div class="content right-bottom" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content. With right place!</div>
</div>
</div>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Color</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="popover bw">
<label class="trigger btn solid" tabindex="0">bw</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover info">
<label class="trigger btn solid" tabindex="0">info</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover success">
<label class="trigger btn solid" tabindex="0">success</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover warn">
<label class="trigger btn solid" tabindex="0">warn</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover danger">
<label class="trigger btn solid" tabindex="0">danger</label>
<div class="content" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
</div>
</div>
<div class="col-span-full">
<h2 class="text-xl">Others</h2>
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="popover open">
<label class="trigger btn solid" tabindex="0">force show</label>
<div class="content right-center" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
<div class="popover hover-show">
<label class="trigger btn solid" tabindex="0">hover-show</label>
<div class="content top-center" tabindex="0">
<div class="arrow"></div>
<div class="p-4 text-sm">Popover content.</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Progress</h1>
<div class="">
<h2 class="text-xl">Color</h2>
<div class="grid gap-4 place-items-center">
<progress class="progress" value="50" max="100"></progress>
<progress class="progress bw" value="50" max="100"></progress>
<progress class="progress info" value="50" max="100"></progress>
<progress class="progress warn" value="50" max="100"></progress>
<progress class="progress success" value="50" max="100"></progress>
<progress class="progress danger" value="50" max="100"></progress>
</div>
</div>
<div class="">
<h2 class="text-xl">Colored</h2>
<div class="grid gap-4 place-items-center">
<progress class="progress colored" value="50" max="100"></progress>
<progress class="progress colored bw" value="50" max="100"></progress>
<progress class="progress colored info" value="50" max="100"></progress>
<progress class="progress colored warn" value="50" max="100"></progress>
<progress class="progress colored success" value="50" max="100"></progress>
<progress class="progress colored danger" value="50" max="100"></progress>
</div>
</div>
<div class="">
<h2 class="text-xl">Size</h2>
<div class="grid gap-4 place-items-center">
<progress class="progress colored warn xs" value="50" max="100"></progress>
<progress class="progress colored warn sm" value="50" max="100"></progress>
<progress class="progress colored warn md" value="50" max="100"></progress>
<progress class="progress colored warn lg" value="50" max="100"></progress>
<progress class="progress colored warn xl" value="50" max="100"></progress>
</div>
</div>
<div class="">
<h2 class="text-xl">Indeterminate</h2>
<div class="grid gap-4 place-items-center">
<progress class="progress colored success"></progress>
<div class="progress indeterminate colored success"></div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Skeleton</h1>
<div class="">
<h2 class="text-xl">Wave</h2>
<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
<div class="skeleton wave"></div>
<div class="skeleton wave bw"></div>
<div class="skeleton wave info"></div>
<div class="skeleton wave success"></div>
<div class="skeleton wave warn"></div>
<div class="skeleton wave danger"></div>
</div>
</div>
<div class="">
<h2 class="text-xl">Static</h2>
<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
<div class="skeleton static"></div>
<div class="skeleton static bw"></div>
<div class="skeleton static info"></div>
<div class="skeleton static success"></div>
<div class="skeleton static warn"></div>
<div class="skeleton static danger"></div>
</div>
</div>
<div class="">
<h2 class="text-xl">Pulse</h2>
<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
<div class="skeleton pulse"></div>
<div class="skeleton pulse bw"></div>
<div class="skeleton pulse info"></div>
<div class="skeleton pulse success"></div>
<div class="skeleton pulse warn"></div>
<div class="skeleton pulse danger"></div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Image</h1>
<div class="">
<h2 class="text-xl">Layout</h2>
<div class="flex flex-wrap gap-4">
<img class="h-48 w-96 object-contain" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"></img>
<img class="h-48 w-96 object-cover" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"></img>
<img class="h-48 w-96 object-fill" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"></img>
<img class="h-48 w-96 object-scale-down" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"></img>
<img class="h-48 w-96 object-none" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"></img>
</div>
</div>
</div>
</body>
!
