Skip to content

GitLab

Hide whitespace changes
Inline Side-by-side
resources/views/pages/components-extension-monochrome.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Monochrome Mode" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Monochrome Mode
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Monochrome Mode</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Monochrome Mode -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Monochrome Mode
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Monochromatic UI/UX design may look simpler. Monochrome mode can
be used if the network is offline.
</p>
<div class="inline-space mt-5 flex flex-wrap">
<div
class="h-16 w-16 rounded-lg bg-primary dark:bg-accent"
></div>
<div class="h-16 w-16 rounded-lg bg-secondary"></div>
<div class="h-16 w-16 rounded-lg bg-info"></div>
<div class="h-16 w-16 rounded-lg bg-success"></div>
<div class="h-16 w-16 rounded-lg bg-warning"></div>
<div class="h-16 w-16 rounded-lg bg-error"></div>
</div>
<label class="mt-4 flex items-center space-x-2">
<input
x-model="$store.global.isMonochromeModeEnabled"
class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
type="checkbox"
/>
<span> Toggle Monochrome Mode</span>
</label>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;label class=&quot;flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; x-model=&quot;$store.global.isMonochromeModeEnabled&quot;&#13;&#10; class=&quot;form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;span&gt; Toggle Monochrome Mode&lt;/span&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; </code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-extension-persist.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Persist Extension" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Persist
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Persist</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Usage
@see https://alpinejs.dev/plugins/persist
-->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Usage
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
<code class="inline-code">$persist</code> useful for persisting
search filters, active tabs, and other features where users will
be frustrated if their configuration is reset after refreshing
or leaving and revisiting a page.
</p>
<div
class="mt-5"
x-data="{value: $persist('').as('other-value')}"
>
<div class="flex -space-x-px">
<input
x-model="value"
class="form-input h-10 w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Enter text"
type="text"
/>
<button
@click="location.reload()"
class="btn z-2 h-10 w-10 shrink-0 rounded-l-none bg-primary p-0 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{value: $persist(&apos;&apos;).as(&apos;other-value&apos;)}&quot;&gt;&#13;&#10; &lt;div class=&quot;flex -space-x-px&quot;&gt;&#13;&#10; &lt;input&#13;&#10; x-model=&quot;value&quot;&#13;&#10; class=&quot;form-input h-10 w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent&quot;&#13;&#10; placeholder=&quot;Enter text&quot;&#13;&#10; type=&quot;text&quot;&#13;&#10; /&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;location.reload()&quot;&#13;&#10; class=&quot;btn z-2 h-10 w-10 shrink-0 rounded-l-none bg-primary p-0 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-menu-list.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Menu List Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Menu
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Menu</li>
</ul>
</div>
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6"
>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 1 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 1
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-3.5 font-inter font-medium">
<li>
<a
class="inline-flex items-center font-medium tracking-wide text-primary outline-none dark:text-accent-light"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Mobile App</span>
</a>
</li>
<li>
<a
class="inline-flex items-center tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<span>Security</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 2 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 2
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-3.5 font-inter font-medium">
<li>
<a
class="inline-flex items-center space-x-2 tracking-wide text-primary outline-none dark:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-primary dark:text-accent-light"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
<span>Mobile App</span>
</a>
</li>
<li>
<a
class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
<span>Security</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 3 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 3
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex rounded-lg bg-primary px-4 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 4 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 4
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex items-center space-x-2 rounded-lg bg-primary px-4 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 5 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 5
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="flex rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="flex rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="flex rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="flex rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="flex rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 6 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 6
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex items-center space-x-2 rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 7 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 7
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex rounded-lg bg-slate-150 px-4 py-2.5 tracking-wide text-slate-800 outline-none transition-all dark:bg-navy-500 dark:text-navy-50"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 8 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 8
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
href="#"
class="flex space-x-2 rounded-lg bg-slate-150 px-4 py-2.5 tracking-wide text-slate-800 outline-none transition-all dark:bg-navy-500 dark:text-navy-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 9 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 9
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex rounded-lg bg-slate-150 bg-gradient-to-r from-purple-500 to-purple-600 px-4 py-2.5 tracking-wide text-white outline-none transition-all"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 10 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 10
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
href="#"
class="flex space-x-2 rounded-lg bg-gradient-to-r from-purple-500 to-purple-600 px-4 py-2.5 tracking-wide text-white outline-none transition-all"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Menu List Example 11 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 11
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
class="flex rounded-lg border border-slate-150 px-4 py-2.5 tracking-wide text-primary shadow-sm outline-none transition-all dark:border-navy-500 dark:text-accent-light"
href="#"
>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Payments</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Returns</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>My Account</span>
</a>
</li>
<li>
<a
class="flex rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Menu List Example 12 -->
<div class="card">
<div
class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5"
>
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Menu List Example 12
</h2>
</div>
<div class="p-4 sm:px-5">
<ul class="space-y-1.5 font-inter font-medium">
<li>
<a
href="#"
class="flex space-x-2 rounded-lg border border-slate-150 px-4 py-2.5 tracking-wide text-primary shadow-sm outline-none transition-all dark:border-navy-500 dark:text-accent-light"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>Getting start</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>Payments</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>Returns</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>My Account</span>
</a>
</li>
<li>
<a
class="group flex space-x-2 rounded-lg px-4 py-2.5 tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill="currentColor"
/>
</svg>
<span>Copyright &amp; Legal</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-modal.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Modal Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
Modal
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#">Components</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li>Modal</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Modal -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Basic Modal
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div>
<p class="max-w-xl">
The Modal component inform users about a specific task and may
contain critical information, require decisions, or involve
multiple tasks.
</p>
<div class="mt-5" x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Basic Modal
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-lg rounded-lg flex overflow-y-auto flex-col bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<svg xmlns="http://www.w3.org/2000/svg"
class="inline h-28 w-28 text-success mx-auto shrink-0" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="mt-4">
<h2 class="text-2xl text-slate-700 dark:text-navy-100">
Success Message
</h2>
<p class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur dignissimos soluta totam?
</p>
<button @click="showModal = false"
class="btn mt-6 bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90">
Close
</button>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Basic Modal&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;inline h-28 w-28 text-success&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;mt-4&quot;&gt;&#13;&#10; &lt;h2 class=&quot;text-2xl text-slate-700 dark:text-navy-100&quot;&gt;&#13;&#10; Success Message&#13;&#10; &lt;/h2&gt;&#13;&#10; &lt;p class=&quot;mt-2&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#13;&#10; Consequuntur dignissimos soluta totam?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn mt-6 bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90&quot;&#13;&#10; &gt;&#13;&#10; Close&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;
</code>
</pre>
</div>
</div>
<!-- Backdrop Blur -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Backdrop Blur
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div>
<p class="max-w-xl">
The Modal component inform users about a specific task and may
contain critical information, require decisions, or involve
multiple tasks.
</p>
<div class="mt-5" x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Backdrop Blur
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-lg flex flex-col overflow-y-auto rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<svg xmlns="http://www.w3.org/2000/svg"
class="inline h-28 w-28 text-success shrink-0 mx-auto" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="mt-4">
<h2 class="text-2xl text-slate-700 dark:text-navy-100">
Success Message
</h2>
<p class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur dignissimos soluta totam?
</p>
<button @click="showModal = false"
class="btn mt-6 bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90">
Close
</button>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Backdrop Blur&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 backdrop-blur transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;inline h-28 w-28 text-success&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;mt-4&quot;&gt;&#13;&#10; &lt;h2 class=&quot;text-2xl text-slate-700 dark:text-navy-100&quot;&gt;&#13;&#10; Success Message&#13;&#10; &lt;/h2&gt;&#13;&#10; &lt;p class=&quot;mt-2&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#13;&#10; Consequuntur dignissimos soluta totam?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn mt-6 bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90&quot;&#13;&#10; &gt;&#13;&#10; Close&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;
</code>
</pre>
</div>
</div>
<!-- Modal Transition -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Modal Transition
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div>
<p class="max-w-xl">
The Modal component inform users about a specific task and may
contain critical information, require decisions, or involve
multiple tasks.
</p>
<div class="inline-space mt-5 flex">
<div x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Shift Up
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-md flex flex-col overflow-y-auto rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700"
x-show="showModal" x-transition:enter="easy-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
x-transition:leave="easy-in"
x-transition:leave-start="opacity-100 [transform:translate3d(0,0,0)]"
x-transition:leave-end="opacity-0 [transform:translate3d(0,1rem,0)]">
<div class="avatar h-20 w-20 mx-auto">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
<div
class="absolute right-0 m-1 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
</div>
</div>
<div class="mt-4 px-4 sm:px-12">
<h3 class="text-lg text-slate-800 dark:text-navy-50">
Follow Request
</h3>
<p class="mt-1 text-slate-500 dark:text-navy-200">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fuga sunt vel vero.
</p>
</div>
<div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div>
<div class="space-x-3">
<button @click="showModal = false"
class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</button>
<button @click="showModal = false"
class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Apply
</button>
</div>
</div>
</div>
</template>
</div>
<div x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Shift Down
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-sm flex flex-col overflow-y-auto rounded-lg bg-white px-4 pb-4 transition-all duration-300 dark:bg-navy-700 sm:px-5"
x-show="showModal" x-transition:enter="easy-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,-1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
x-transition:leave="easy-in"
x-transition:leave-start="opacity-100 [transform:translate3d(0,0,0)]"
x-transition:leave-end="opacity-0 [transform:translate3d(0,-1rem,0)]">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Table Settings
</h2>
<button @click="showModal = !showModal"
class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aut dignissimos.
</p>
<div class="mt-4 grid grid-cols-2 gap-4">
<label class="inline-flex items-center space-x-2">
<input checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>ID</p>
</label>
<label class="inline-flex items-center space-x-2">
<input checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>Name</p>
</label>
<label class="inline-flex items-center space-x-2">
<input checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>Email</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>Address</p>
</label>
<label class="inline-flex items-center space-x-2">
<input checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>Created at</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" />
<p>Updated at</p>
</label>
<label class="col-span-2 inline-flex items-center space-x-2">
<input
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
type="checkbox" />
<span>Show Avatar</span>
</label>
</div>
<div class="mt-4 text-right">
<button
class="btn h-8 rounded-full text-xs+ font-medium text-slate-700 hover:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25">
Cancel
</button>
<button @click="showModal = false"
class="btn h-8 rounded-full bg-primary text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Apply
</button>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Shift Up&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;easy-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; x-transition:leave=&quot;easy-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;avatar h-20 w-20&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute right-0 m-1 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;mt-4 px-4 sm:px-12&quot;&gt;&#13;&#10; &lt;h3 class=&quot;text-lg text-slate-800 dark:text-navy-50&quot;&gt;&#13;&#10; Follow Request&#13;&#10; &lt;/h3&gt;&#13;&#10; &lt;p class=&quot;mt-1 text-slate-500 dark:text-navy-200&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga&#13;&#10; sunt vel vero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;space-x-3&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90&quot;&#13;&#10; &gt;&#13;&#10; Cancel&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Apply&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Shift Down&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative max-w-sm rounded-lg bg-white px-4 pb-4 transition-all duration-300 dark:bg-navy-700 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;easy-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,-1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; x-transition:leave=&quot;easy-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0 [transform:translate3d(0,-1rem,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;my-3 flex h-8 items-center justify-between&quot;&gt;&#13;&#10; &lt;h2&#13;&#10; class=&quot;font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base&quot;&#13;&#10; &gt;&#13;&#10; Table Settings&#13;&#10; &lt;/h2&gt;&#13;&#10;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = !showModal&quot;&#13;&#10; class=&quot;btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M6 18L18 6M6 6l12 12&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut&#13;&#10; dignissimos.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;mt-4 grid grid-cols-2 gap-4&quot;&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;ID&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Name&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Email&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Address&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Created at&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Updated at&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;col-span-2 inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;span&gt;Show Avatar&lt;/span&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;mt-4 text-right&quot;&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-8 rounded-full text-xs+ font-medium text-slate-700 hover:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; Cancel&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn h-8 rounded-full bg-primary text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Apply&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Modal Scale -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Modal Scale
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div>
<p class="max-w-xl">
The Modal component inform users about a specific task and may
contain critical information, require decisions, or involve
multiple tasks.
</p>
<div class="inline-space mt-5 flex">
<div x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Origin Top
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative w-full flex flex-col overflow-hidden max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
x-show="showModal" x-transition:enter="easy-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95">
<div
class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Edit Pin
</h3>
<button @click="showModal = !showModal"
class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="overflow-y-auto px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Assumenda incidunt
</p>
<div class="mt-4 space-y-4">
<label class="block">
<span>Choose category :</span>
<select
class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
<option>Laravel</option>
<option>Node JS</option>
<option>Django</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span>Description:</span>
<textarea rows="4" placeholder=" Enter Text"
class="form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"></textarea>
</label>
<label class="block">
<span>Website Address:</span>
<input
class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="URL Address" type="text" />
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
type="checkbox" />
<span>Public pin</span>
</label>
<div class="space-x-2 text-right">
<button @click="showModal = false"
class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</button>
<button @click="showModal = false"
class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Apply
</button>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<div x-data="{ showModal: false }">
<button @click="showModal = true"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Origin bottom
</button>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative w-full flex flex-col overflow-hidden max-w-2xl origin-bottom rounded-lg bg-white pb-4 transition-all duration-300 dark:bg-navy-700"
x-show="showModal" x-transition:enter="easy-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95">
<div
class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Users Status
</h3>
<button @click="showModal = !showModal"
class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="scrollbar-sm min-w-full overflow-auto">
<table class="w-full text-left">
<thead>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5">
#
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5">
Name
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5">
Role
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5">
Status
</th>
</tr>
</thead>
<tbody>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
1
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Cy Ganderton
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Admin
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Online</span>
</div>
</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
2
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Travis Fuller
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Teacher
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Online</span>
</div>
</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
3
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Konnor Guzman
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Moderator
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Online</span>
</div>
</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
4
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Alfredo Elliott
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Admin
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Offline</span>
</div>
</td>
</tr>
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
5
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Derrick Simmons
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Teacher
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Offline</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center">
<button
class="btn mt-4 border border-primary/30 bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
Show All
</button>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Origin Top&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;easy-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 scale-95&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 scale-100&quot;&#13;&#10; x-transition:leave=&quot;easy-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100 scale-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0 scale-95&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; &lt;h3 class=&quot;text-base font-medium text-slate-700 dark:text-navy-100&quot;&gt;&#13;&#10; Edit Pin&#13;&#10; &lt;/h3&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = !showModal&quot;&#13;&#10; class=&quot;btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M6 18L18 6M6 6l12 12&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#13;&#10; Assumenda incidunt&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;mt-4 space-y-4&quot;&gt;&#13;&#10; &lt;label class=&quot;block&quot;&gt;&#13;&#10; &lt;span&gt;Choose category :&lt;/span&gt;&#13;&#10; &lt;select&#13;&#10; class=&quot;form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent&quot;&#13;&#10; &gt;&#13;&#10; &lt;option&gt;Laravel&lt;/option&gt;&#13;&#10; &lt;option&gt;Node JS&lt;/option&gt;&#13;&#10; &lt;option&gt;Django&lt;/option&gt;&#13;&#10; &lt;option&gt;Other&lt;/option&gt;&#13;&#10; &lt;/select&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;block&quot;&gt;&#13;&#10; &lt;span&gt;Description:&lt;/span&gt;&#13;&#10; &lt;textarea&#13;&#10; rows=&quot;4&quot;&#13;&#10; placeholder=&quot; Enter Text&quot;&#13;&#10; class=&quot;form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent&quot;&#13;&#10; &gt;&lt;/textarea&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;block&quot;&gt;&#13;&#10; &lt;span&gt;Website Address:&lt;/span&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent&quot;&#13;&#10; placeholder=&quot;URL Address&quot;&#13;&#10; type=&quot;text&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;span&gt;Public pin&lt;/span&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;div class=&quot;space-x-2 text-right&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90&quot;&#13;&#10; &gt;&#13;&#10; Cancel&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; class=&quot;btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Apply&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div x-data=&quot;{showModal:false}&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = true&quot;&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Origin bottom&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template x-teleport=&quot;#x-teleport-target&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; role=&quot;dialog&quot;&#13;&#10; @keydown.window.escape=&quot;showModal = false&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute inset-0 bg-slate-900/60 transition-opacity duration-300&quot;&#13;&#10; @click=&quot;showModal = false&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;ease-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100&quot;&#13;&#10; x-transition:leave=&quot;ease-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;relative w-full max-w-2xl origin-bottom rounded-lg bg-white pb-4 transition-all duration-300 dark:bg-navy-700&quot;&#13;&#10; x-show=&quot;showModal&quot;&#13;&#10; x-transition:enter=&quot;easy-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 scale-95&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 scale-100&quot;&#13;&#10; x-transition:leave=&quot;easy-in&quot;&#13;&#10; x-transition:leave-start=&quot;opacity-100 scale-100&quot;&#13;&#10; x-transition:leave-end=&quot;opacity-0 scale-95&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; &lt;h3 class=&quot;text-base font-medium text-slate-700 dark:text-navy-100&quot;&gt;&#13;&#10; Users Status&#13;&#10; &lt;/h3&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;showModal = !showModal&quot;&#13;&#10; class=&quot;btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M6 18L18 6M6 6l12 12&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;is-scrollbar-hidden min-w-full overflow-x-auto&quot;&gt;&#13;&#10; &lt;table class=&quot;w-full text-left&quot;&gt;&#13;&#10; &lt;thead&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;th&#13;&#10; class=&quot;whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5&quot;&#13;&#10; &gt;&#13;&#10; #&#13;&#10; &lt;/th&gt;&#13;&#10; &lt;th&#13;&#10; class=&quot;whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5&quot;&#13;&#10; &gt;&#13;&#10; Name&#13;&#10; &lt;/th&gt;&#13;&#10; &lt;th&#13;&#10; class=&quot;whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5&quot;&#13;&#10; &gt;&#13;&#10; Role&#13;&#10; &lt;/th&gt;&#13;&#10; &lt;th&#13;&#10; class=&quot;whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5&quot;&#13;&#10; &gt;&#13;&#10; Status&#13;&#10; &lt;/th&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;/thead&gt;&#13;&#10; &lt;tbody&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;1&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; Cy Ganderton&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;Admin&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-2 w-2 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Online&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;2&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; Travis Fuller&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;Teacher&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-2 w-2 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Online&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;3&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; Konnor Guzman&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;Moderator&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-2 w-2 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Online&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;4&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; Alfredo Elliott&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;Admin&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-2 w-2 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Offline&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;tr&#13;&#10; class=&quot;border-y border-transparent border-b-slate-200 dark:border-b-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;5&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; Derrick Simmons&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;Teacher&lt;/td&gt;&#13;&#10; &lt;td class=&quot;whitespace-nowrap px-4 py-3 sm:px-5&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-2 w-2 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Offline&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/td&gt;&#13;&#10; &lt;/tr&gt;&#13;&#10; &lt;/tbody&gt;&#13;&#10; &lt;/table&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;text-center&quot;&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn mt-4 border border-primary/30 bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25&quot;&#13;&#10; &gt;&#13;&#10; Show All&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-notification.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Notification Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Notification
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components
</a>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Notification</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Notification -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Notification
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The toast is used to show alerts on top of an overlay. The toast
will close itself when the close button is clicked, or after a
timeout — the default is 5 seconds. Check out code for detail of
usage.
</p>
<div class="mt-5">
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a simple notification'})"
>
Default
</button>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Default&#13;&#10; &lt;/button&gt;</code>
</pre>
</div>
</div>
<!-- Notification Variants -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Notification Variants
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div>
<p class="max-w-xl">
The toast is used to show alerts on top of an overlay. The toast
will close itself when the close button is clicked, or after a
timeout — the default is 5 seconds. Check out code for detail of
usage.
</p>
<div class="inline-space mt-5">
<button
class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
@click="$notification({text:'This is a simple notification',variant:'primary'})"
>
Primary
</button>
<button
class="btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
@click="$notification({text:'This is a simple notification',variant:'secondary'})"
>
Secondary
</button>
<button
class="btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
@click="$notification({text:'This is a simple notification',variant:'info'})"
>
Info
</button>
<button
class="btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
@click="$notification({text:'This is a simple notification',variant:'success'})"
>
Success
</button>
<button
class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
@click="$notification({text:'This is a simple notification',variant:'warning'})"
>
Warning
</button>
<button
class="btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
@click="$notification({text:'This is a simple notification',variant:'error'})"
>
Error
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
@click="$notification({text:'This is a simple notification',variant:'light'})"
>
Light
</button>
<button
class="btn bg-navy-500 font-medium text-slate-200 hover:bg-navy-450 focus:bg-navy-450 active:bg-navy-450/90"
@click="$notification({text:'This is a simple notification',variant:'dark'})"
>
Dark
</button>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;button&#13;&#10; class=&quot;btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;primary&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Primary&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;secondary&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Secondary&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;info&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Info&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;success&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Success&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;warning&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Warning&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;error&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Error&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;light&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Light&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-navy-500 font-medium text-slate-200 hover:bg-navy-450 focus:bg-navy-450 active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;dark&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Dark&#13;&#10; &lt;/button&gt;</code>
</pre>
</div>
</div>
<!-- Notification Position -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Notification Position
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div>
<p class="max-w-xl">
The toast is used to show alerts on top of an overlay. The toast
will close itself when the close button is clicked, or after a
timeout — the default is 5 seconds. Check out code for detail of
usage.
</p>
<div class="inline-space mt-5">
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a left top notification',variant:'info',position:'left-top'})"
>
Left Top
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a left bottom notification',variant:'info',position:'left-bottom'})"
>
Left Bottom
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a center top notification',variant:'info',position:'center-top'})"
>
Center Top
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a center bottom notification',variant:'info',position:'center-bottom'})"
>
Center Bottom
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a right top notification',variant:'info',position:'right-top'})"
>
Right Top
</button>
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a right bottom notification',variant:'info',position:'right-bottom'})"
>
Right Bottom
</button>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a left top notification&apos;,variant:&apos;info&apos;,position:&apos;left-top&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Left Top&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a left bottom notification&apos;,variant:&apos;info&apos;,position:&apos;left-bottom&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Left Bottom&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a center top notification&apos;,variant:&apos;info&apos;,position:&apos;center-top&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Center Top&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a center bottom notification&apos;,variant:&apos;info&apos;,position:&apos;center-bottom&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Center Bottom&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a right top notification&apos;,variant:&apos;info&apos;,position:&apos;right-top&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Right Top&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a right bottom notification&apos;,variant:&apos;info&apos;,position:&apos;right-bottom&apos;})&quot;&#13;&#10; &gt;&#13;&#10; Right Bottom&#13;&#10; &lt;/button&gt;</code>
</pre>
</div>
</div>
<!-- Notification Duration -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Notification Duration
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div>
<p class="max-w-xl">
The toast is used to show alerts on top of an overlay. The toast
will close itself when the close button is clicked, or after a
timeout — the default is 5 seconds. Check out code for detail of
usage.
</p>
<div class="mt-5">
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({text:'This is a simple notification',variant:'info',duration:3000})"
>
3 Seconds
</button>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({text:&apos;This is a simple notification&apos;,variant:&apos;info&apos;,duration:3000})&quot;&#13;&#10; &gt;&#13;&#10; 3 Seconds&#13;&#10; &lt;/button&gt;&#13;&#10;</code>
</pre>
</div>
</div>
<!-- Custom HTML Content -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Custom HTML Content
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div>
<p class="max-w-xl">
The toast is used to show alerts on top of an overlay. The toast
will close itself when the close button is clicked, or after a
timeout — the default is 5 seconds. Check out code for detail of
usage.
</p>
<div class="mt-5">
<button
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
@click="$notification({content:'#custom-html-notif',duration:3000})"
>
HTML content
</button>
<template id="custom-html-notif">
<div
class="flex max-w-xs overflow-hidden rounded-lg bg-navy-600 font-normal"
>
<div class="flex items-start p-4">
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
<div
class="absolute right-0 h-3 w-3 rounded-full border-2 border-navy-600 bg-primary dark:bg-accent"
></div>
</div>
</div>
<div class="p-2">
<div class="flex items-center justify-between space-x-2">
<h5
class="font-medium tracking-wide text-navy-100 line-clamp-1 lg:text-base"
>
Message Header
</h5>
<button
data-notification-remove
class="btn h-7 w-7 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p class="text-navy-100">
Lorem ipsum dolor sit amet, consectetur
</p>
<div class="flex justify-end px-3 py-1">
<a
href="#"
class="uppercase text-accent-light hover:underline"
>show</a
>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;button&#13;&#10; class=&quot;btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; @click=&quot;$notification({content:&apos;#custom-html-notif&apos;,duration:3000})&quot;&#13;&#10; &gt;&#13;&#10; HTML content&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;template id=&quot;custom-html-notif&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;flex max-w-xs overflow-hidden rounded-lg bg-navy-600 font-normal&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex items-start p-4&quot;&gt;&#13;&#10; &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;absolute right-0 h-3 w-3 rounded-full border-2 border-navy-600 bg-primary dark:bg-accent&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;p-2&quot;&gt;&#13;&#10; &lt;div class=&quot;flex items-center justify-between space-x-2&quot;&gt;&#13;&#10; &lt;h5&#13;&#10; class=&quot;font-medium tracking-wide text-navy-100 line-clamp-1 lg:text-base&quot;&#13;&#10; &gt;&#13;&#10; Message Header&#13;&#10; &lt;/h5&gt;&#13;&#10; &lt;button&#13;&#10; data-notification-remove&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M6 18L18 6M6 6l12 12&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p class=&quot;text-navy-100&quot;&gt;Lorem ipsum dolor sit amet, consectetur&lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex justify-end px-3 py-1&quot;&gt;&#13;&#10; &lt;a href=&quot;#&quot; class=&quot;uppercase text-accent-light hover:underline&quot;&#13;&#10; &gt;show&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/template&gt;</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-pagination.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Pagination Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
Pagination
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#">Components</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li>Pagination</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Pagination -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Basic Pagination
</h2>
<label class="inline-flex items-center space-x-2">
<p class="dark:text-navy-250 text-xs text-slate-400">Code</p>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Pagination is a group of buttons that allow the user to navigate
between a set of related content. Check out code for detail of
usage.
</p>
<div class="mt-5">
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;ol class=&quot;pagination&quot;&gt;&#13;&#10; &lt;li class=&quot;rounded-l-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;rounded-r-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;</code>
</pre>
</div>
</div>
<!-- Rounded Pagination -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Rounded Pagination
</h2>
<label class="inline-flex items-center space-x-2">
<p class="dark:text-navy-250 text-xs text-slate-400">Code</p>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Pagination can have a rounded shape. Check out code for detail
of usage.
</p>
<div class="mt-5">
<ol class="pagination">
<li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;ol class=&quot;pagination&quot;&gt;&#13;&#10; &lt;li class=&quot;rounded-l-full bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;rounded-r-full bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;</code>
</pre>
</div>
</div>
<!-- Divided Pagination -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Divided Pagination
</h2>
<label class="inline-flex items-center space-x-2">
<p class="dark:text-navy-250 text-xs text-slate-400">Code</p>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Pagination can be divided. Check out code for detail of usage.
</p>
<div class="mt-5">
<ol class="pagination space-x-1.5">
<li>
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li>
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;ol class=&quot;pagination space-x-1.5&quot;&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;</code>
</pre>
</div>
</div>
<!-- Rounded & Divided -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Rounded & Divided
</h2>
<label class="inline-flex items-center space-x-2">
<p class="dark:text-navy-250 text-xs text-slate-400">Code</p>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Pagination can be rounded and divided. Check out code for detail
of usage.
</p>
<div class="mt-5">
<ol class="pagination space-x-1.5">
<li>
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li>
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li>
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;ol class=&quot;pagination space-x-1.5&quot;&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;</code>
</pre>
</div>
</div>
<!-- Pagination Size -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Pagination Size
</h2>
<label class="inline-flex items-center space-x-2">
<p class="dark:text-navy-250 text-xs text-slate-400">Code</p>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Pagination is a group of buttons that allow the user to navigate
between a set of related content. Check out code for detail of
usage.
</p>
<div class="mt-5 space-y-4">
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg bg-primary px-2 text-xs+ leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg bg-primary px-3 text-sm+ leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;!-- First --&gt;&#13;&#10; &lt;ol class=&quot;pagination&quot;&gt;&#13;&#10; &lt;li class=&quot;rounded-l-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg bg-primary px-2 text-xs+ leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;rounded-r-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10;&#13;&#10; &lt;!-- Second --&gt;&#13;&#10; &lt;ol class=&quot;pagination&quot;&gt;&#13;&#10; &lt;li class=&quot;rounded-l-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;rounded-r-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10;&#13;&#10; &lt;!-- Third --&gt;&#13;&#10; &lt;ol class=&quot;pagination&quot;&gt;&#13;&#10; &lt;li class=&quot;rounded-l-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M15 19l-7-7 7-7&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;1&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg bg-primary px-3 text-sm+ leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;2&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;3&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;4&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;5&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;rounded-r-lg bg-slate-150 dark:bg-navy-500&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewbox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M9 5l7 7-7 7&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-popover.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Popover Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Popover
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Popover</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Popover -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Popover
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The Popover component is similar to tooltips. The difference is
that the popover can contain much more content. Check out code
for detail of usage.
</p>
<div class="mt-5">
<div
x-data="usePopper({
offset: 12,
placement: 'right-start',
modifiers: [
{name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
{name: 'preventOverflow', options: {padding: 10}}
]
})"
@click.outside="if(isShowPopper) isShowPopper = false"
class="flex"
>
<button
class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
Basic Popover
</button>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box max-w-xs">
<div
class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
>
<h3
class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
UI/UX Design
</h3>
<p class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
<div class="mt-3 flex space-x-2">
<a
href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Tag 1
</a>
<a
href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Tag 2
</a>
<a
href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Tag 3
</a>
</div>
<p
class="mt-3 text-xs text-slate-400 dark:text-navy-300"
>
Lorem ipsum dolor sit amet, elit.
</p>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;right-start&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;flip&apos;, options: {fallbackPlacements: [&apos;bottom&apos;,&apos;top&apos;]}},&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ]&#13;&#10; })&quot;&#13;&#10; @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; &gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; x-ref=&quot;popperRef&quot;&#13;&#10; @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10; &gt;&#13;&#10; Basic Popover&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10; &lt;div class=&quot;popper-box max-w-xs&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;h3&#13;&#10; class=&quot;text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; UI/UX Design&#13;&#10; &lt;/h3&gt;&#13;&#10; &lt;p class=&quot;mt-2&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;mt-3 flex space-x-2&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; Tag 3&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p class=&quot;mt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet, elit.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Advanced Popover -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Advanced Popover
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The Popover component is similar to tooltips. The difference is
that the popover can contain much more content. Check out code
for detail of usage.
</p>
<div class="mt-5">
<div
x-data="usePopper({
offset: 12,
placement: 'right-start',
modifiers: [
{name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
{name: 'preventOverflow', options: {padding: 10}}
]
})"
@click.outside="if(isShowPopper) isShowPopper = false"
class="flex"
>
<button
class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
Lessons
</button>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box max-w-xs">
<div
class="rounded-md border border-slate-150 bg-white py-3 px-4 dark:border-navy-600 dark:bg-navy-700"
>
<h3
class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Group Lesson
</h3>
<div class="mt-3">
<p
class="font-medium text-slate-600 dark:text-navy-100"
>
Social Media Marketing
</p>
<p class="mt-1 text-xs">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</p>
</div>
<div class="mt-4 flex flex-wrap -space-x-2">
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<p class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 dark:text-navy-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span class="text-xs">25 May, 2022</span>
</p>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;right-start&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;flip&apos;, options: {fallbackPlacements: [&apos;bottom&apos;,&apos;top&apos;]}},&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ]&#13;&#10; })&quot;&#13;&#10; @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; &gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; x-ref=&quot;popperRef&quot;&#13;&#10; @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10; &gt;&#13;&#10; Lessons&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10; &lt;div class=&quot;popper-box max-w-xs&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;rounded-md border border-slate-150 bg-white py-3 px-4 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;h3&#13;&#10; class=&quot;text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Group Lesson&#13;&#10; &lt;/h3&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;mt-3&quot;&gt;&#13;&#10; &lt;p class=&quot;font-medium text-slate-600 dark:text-navy-100&quot;&gt;&#13;&#10; Social Media Marketing&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;p class=&quot;mt-1 text-xs&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;mt-4 flex flex-wrap -space-x-2&quot;&gt;&#13;&#10; &lt;div class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10; &gt;&#13;&#10; jd&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;mt-4 flex items-center justify-between&quot;&gt;&#13;&#10; &lt;p class=&quot;flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5 text-slate-400 dark:text-navy-300&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; d=&quot;M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span class=&quot;text-xs&quot;&gt;25 May, 2022&lt;/span&gt;&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10; &gt;&lt;/path&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- From Popover -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Form Popover
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The Popover component is similar to tooltips. The difference is
that the popover can contain much more content. Check out code
for detail of usage.
</p>
<div class="mt-5">
<div
x-data="usePopper({
offset: 12,
placement: 'auto',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
@click.outside="if(isShowPopper) isShowPopper = false"
class="flex"
>
<button
class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
Choose Columns
</button>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box max-w-[16rem]">
<div
class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
>
<h3
class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Select Columns
</h3>
<p class="mt-1 text-xs+">
Lorem ipsum dolor sit amet, consectetur.
</p>
<div
class="mt-4 flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
>
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<span>ID</span>
</label>
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<span>Name</span>
</label>
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<span>Email</span>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Address</p>
</label>
</div>
<div
class="my-4 h-px bg-slate-200 dark:bg-navy-500"
></div>
<div
class="flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
>
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<span>Created at</span>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<span>Updated at</span>
</label>
</div>
<button
@click="isShowPopper=false"
class="btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Apply
</button>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;auto&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ]&#13;&#10; })&quot;&#13;&#10; @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; &gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; x-ref=&quot;popperRef&quot;&#13;&#10; @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10; &gt;&#13;&#10; Choose Columns&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10; &lt;div class=&quot;popper-box max-w-[16rem]&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;h3&#13;&#10; class=&quot;text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Select Columns&#13;&#10; &lt;/h3&gt;&#13;&#10; &lt;p class=&quot;mt-1 text-xs+&quot;&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/p&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;mt-4 flex flex-col space-y-4 text-slate-600 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;ID&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Name&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Email&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Address&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;my-4 h-px bg-slate-200 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;flex flex-col space-y-4 text-slate-600 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; checked&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Created at&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;label class=&quot;inline-flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; class=&quot;form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;p&gt;Updated at&lt;/p&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;isShowPopper=false&quot;&#13;&#10; class=&quot;btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Apply&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Profile Popover -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Profile Popover
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The Popover component is similar to tooltips. The difference is
that the popover can contain much more content. Check out code
for detail of usage.
</p>
<div class="mt-5">
<div
class="flex flex-wrap justify-center -space-x-2 sm:justify-start"
>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
>
<div class="avatar h-16 w-16">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<p
class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
John Doe
</p>
<a
href="#"
class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>@johndoeaccount</a
>
<button
class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Follow
</button>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
>
<div class="avatar h-16 w-16">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<p
class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Sally Ramos
</p>
<a
href="#"
class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>@sallyramos
</a>
<button
class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Follow
</button>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
>
<div class="avatar h-16 w-16">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<p
class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Katrina West
</p>
<a
href="#"
class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>@katrinawest
</a>
<button
class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Follow
</button>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div class=&quot;flex flex-wrap justify-center -space-x-2 sm:justify-start&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;avatar h-16 w-16&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; John Doe&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light&quot;&#13;&#10; &gt;@johndoeaccount&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Follow&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;, &#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;avatar h-16 w-16&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Sally Ramos&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light&quot;&#13;&#10; &gt;@sallyramos&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Follow&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;, &#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;avatar h-16 w-16&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Katrina West&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light&quot;&#13;&#10; &gt;@katrinawest&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10; &gt;&#13;&#10; Follow&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Profile Popover -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Profile Popover
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
The Popover component is similar to tooltips. The difference is
that the popover can contain much more content. Check out code
for detail of usage.
</p>
<div class="mt-5">
<div
class="flex flex-wrap justify-center -space-x-2 sm:justify-start"
>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
>
<div class="flex space-x-3">
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
class="flex w-full items-start justify-between"
>
<div>
<p
class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor G.
</p>
<p
class="text-xs text-primary line-clamp-1 dark:text-accent-light"
>
Web Developer
</p>
</div>
<div
class="badge h-5 space-x-1.5 rounded-full bg-success/10 px-1.5 text-success dark:bg-success/15"
>
<div
class="h-1.5 w-1.5 rounded-full bg-current"
></div>
<span>Free</span>
</div>
</div>
</div>
<p
class="pt-2 text-xs text-slate-400 dark:text-navy-300"
>
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Consequuntur.
</p>
<div class="flex justify-end space-x-1 pt-4">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</div>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
>
<div class="flex space-x-3">
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
class="flex w-full items-start justify-between"
>
<div>
<p
class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John D.
</p>
<p
class="text-xs text-primary line-clamp-1 dark:text-accent-light"
>
UI/UX Designer
</p>
</div>
<div
class="badge h-5 space-x-1.5 rounded-full bg-error/10 px-1.5 text-error dark:bg-error/15"
>
<div
class="h-1.5 w-1.5 rounded-full bg-current"
></div>
<span>Busy</span>
</div>
</div>
</div>
<p
class="pt-2 text-xs text-slate-400 dark:text-navy-300"
>
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Consequuntur.
</p>
<div class="flex justify-end space-x-1 pt-4">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</div>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
<div
x-data="usePopper({
offset: 12,
placement: 'top',
modifiers: [
{name: 'preventOverflow', options: {padding: 10}}
]
})"
class="flex"
@mouseleave="isShowPopper = false"
@mouseenter="isShowPopper = true"
>
<div x-ref="popperRef" class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div class="popper-box">
<div
class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
>
<div class="flex space-x-3">
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="{{asset('images/200x200.png')}}"
alt="avatar"
/>
</div>
<div
class="flex w-full items-start justify-between"
>
<div>
<p
class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Simon T.
</p>
<p
class="text-xs text-primary line-clamp-1 dark:text-accent-light"
>
Fronend Developer
</p>
</div>
<div
class="badge h-5 space-x-1.5 rounded-full bg-warning/10 px-1.5 text-warning dark:bg-warning/15"
>
<div
class="h-1.5 w-1.5 rounded-full bg-current"
></div>
<span>At work</span>
</div>
</div>
</div>
<p
class="pt-2 text-xs text-slate-400 dark:text-navy-300"
>
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Consequuntur.
</p>
<div class="flex justify-end space-x-1 pt-4">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</div>
</div>
<div class="h-4 w-4" data-popper-arrow>
<svg
viewBox="0 0 16 9"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-4 w-4"
fill="currentColor"
>
<path
class="text-slate-150 dark:text-navy-600"
d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
/>
<path
class="text-white dark:text-navy-700"
d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div class=&quot;flex flex-wrap justify-center -space-x-2 sm:justify-start&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex space-x-3&quot;&gt;&#13;&#10; &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;flex w-full items-start justify-between&quot;&gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Konnor G.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs text-primary line-clamp-1 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Web Developer&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge h-5 space-x-1.5 rounded-full bg-success/10 px-1.5 text-success dark:bg-success/15&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-1.5 w-1.5 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Free&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p class=&quot;pt-2 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit, amet consectetur adipisicing elit.&#13;&#10; Consequuntur.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex justify-end space-x-1 pt-4&quot;&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex space-x-3&quot;&gt;&#13;&#10; &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;flex w-full items-start justify-between&quot;&gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; John D.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs text-primary line-clamp-1 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; UI/UX Designer&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge h-5 space-x-1.5 rounded-full bg-error/10 px-1.5 text-error dark:bg-error/15&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-1.5 w-1.5 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;Busy&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p class=&quot;pt-2 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit, amet consectetur adipisicing elit.&#13;&#10; Consequuntur.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex justify-end space-x-1 pt-4&quot;&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({&#13;&#10; offset: 12,&#13;&#10; placement: &apos;top&apos;,&#13;&#10; modifiers: [&#13;&#10; {name: &apos;preventOverflow&apos;, options: {padding: 10}}&#13;&#10; ] &#13;&#10; })&quot;&#13;&#10; class=&quot;flex&quot;&#13;&#10; @mouseleave=&quot;isShowPopper = false&quot;&#13;&#10; @mouseenter=&quot;isShowPopper = true&quot;&#13;&#10; &gt;&#13;&#10; &lt;div x-ref=&quot;popperRef&quot; class=&quot;avatar h-8 w-8 hover:z-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;popper-box&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex space-x-3&quot;&gt;&#13;&#10; &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10; &lt;img&#13;&#10; class=&quot;rounded-full&quot;&#13;&#10; src=&quot;images/200x200.png&quot;&#13;&#10; alt=&quot;avatar&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;flex w-full items-start justify-between&quot;&gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100&quot;&#13;&#10; &gt;&#13;&#10; Simon T.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;p&#13;&#10; class=&quot;text-xs text-primary line-clamp-1 dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Fronend Developer&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;badge h-5 space-x-1.5 rounded-full bg-warning/10 px-1.5 text-warning dark:bg-warning/15&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;h-1.5 w-1.5 rounded-full bg-current&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;span&gt;At work&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;p class=&quot;pt-2 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit, amet consectetur adipisicing elit.&#13;&#10; Consequuntur.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex justify-end space-x-1 pt-4&quot;&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;h-4 w-4&quot; data-popper-arrow&gt;&#13;&#10; &lt;svg&#13;&#10; viewBox=&quot;0 0 16 9&quot;&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;absolute h-4 w-4&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-slate-150 dark:text-navy-600&quot;&#13;&#10; d=&quot;M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;path&#13;&#10; class=&quot;text-white dark:text-navy-700&quot;&#13;&#10; d=&quot;M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-steps.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Steps Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Steps
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Steps</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Step -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Steps
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Primary Steps -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Primary Steps
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps">
<li class="step before:bg-primary dark:before:bg-accent">
<div
class="step-header rounded-full bg-primary text-white dark:bg-accent"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li class="step before:bg-primary dark:before:bg-accent">
<div
class="step-header rounded-full bg-primary text-white dark:bg-accent"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li class="step before:bg-primary dark:before:bg-accent">
<div
class="step-header rounded-full bg-primary text-white dark:bg-accent"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li class="step before:bg-primary dark:before:bg-accent">
<div
class="step-header rounded-full bg-primary text-white dark:bg-accent"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-primary dark:before:bg-accent&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-primary text-white dark:bg-accent&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-primary dark:before:bg-accent&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-primary text-white dark:bg-accent&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-primary dark:before:bg-accent&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-primary text-white dark:bg-accent&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-primary dark:before:bg-accent&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-primary text-white dark:bg-accent&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- With Line Space -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
With Line Space
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps line-space">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps line-space&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Steps Size -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Steps Size
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5 space-y-4">
<div>
<ol class="steps [--size:1rem] [--line:1px]">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 1
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 2
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 3
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 4
</h3>
</li>
</ol>
</div>
<div>
<ol class="steps">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
<div>
<ol class="steps [--size:2.75rem] [--line:.5rem]">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps [--size:1rem] [--line:1px]&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps [--size:2.75rem] [--line:.5rem]&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Vertical Steps -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Vertical Steps
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps is-vertical">
<li
class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step space-x-4 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps is-vertical&quot;&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step space-x-4 before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Vertical Steps With Line Space -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Vertical With Line Space
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps is-vertical line-space">
<li
class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
1
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
</li>
<li
class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
2
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
</li>
<li
class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
3
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
</li>
<li
class="step space-x-4 before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
>
4
</div>
<h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps is-vertical line-space&quot;&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 1&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 2&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&#13;&#10; class=&quot;step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 3&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 3&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step space-x-4 before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white&quot;&#13;&#10; &gt;&#13;&#10; 4&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-slate-600 dark:text-navy-100&quot;&gt;Step 4&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Colored Steps -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Colored Steps
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Steps can be used to show a list of steps in a process. Check
out code for detail of usage.
</p>
<div class="mt-5">
<div>
<ol class="steps line-space [--size:.75rem] [--line:1px]">
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-primary dark:bg-accent"
></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 1
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div
class="step-header rounded-full bg-secondary dark:bg-secondary-light"
>
<span
class="inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80 dark:bg-secondary-light"
></span>
</div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 2
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div class="step-header rounded-full bg-info"></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 2
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div class="step-header rounded-full bg-error"></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 2
</h3>
</li>
<li
class="step before:bg-slate-200 dark:before:bg-navy-500"
>
<div class="step-header rounded-full bg-warning"></div>
<h3 class="text-xs+ text-slate-600 dark:text-navy-100">
Step 2
</h3>
</li>
</ol>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&gt;&#13;&#10; &lt;ol class=&quot;steps line-space [--size:.75rem] [--line:1px]&quot;&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;step-header rounded-full bg-primary dark:bg-accent&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 1&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;step-header rounded-full bg-secondary dark:bg-secondary-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;span&#13;&#10; class=&quot;inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80 dark:bg-secondary-light&quot;&#13;&#10; &gt;&lt;/span&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;step-header rounded-full bg-info&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;step-header rounded-full bg-error&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li class=&quot;step before:bg-slate-200 dark:before:bg-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;step-header rounded-full bg-warning&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;h3 class=&quot;text-xs+ text-slate-600 dark:text-navy-100&quot;&gt;Step 2&lt;/h3&gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ol&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-tab.blade.php deleted 100644 → 0
View file @ fb8995ec
<x-app-layout title="Tab Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
Tabs
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#">Components</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li>Tabs</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Basic Tabs -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Basic Tabs
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Tabs make it easy to explore and switch between different views.
Check out code for detail of usage.
</p>
<div class="mt-5">
<div x-data="{ activeTab: 'tabHome' }" class="tabs flex flex-col">
<div class="is-scrollbar-hidden overflow-x-auto">
<div class="tabs-list flex">
<button @click="activeTab = 'tabHome'"
:class="activeTab === 'tabHome' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Home
</button>
<button @click="activeTab = 'tabProfile'"
:class="activeTab === 'tabProfile' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Profile
</button>
<button @click="activeTab = 'tabMessages'"
:class="activeTab === 'tabMessages' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Messages
</button>
<button @click="activeTab = 'tabSettings'"
:class="activeTab === 'tabSettings' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Settings
</button>
</div>
</div>
<div class="tab-content pt-4">
<div x-show="activeTab === 'tabHome'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent elementum finibus arcu vitae
scelerisque. Etiam rutrum blandit condimentum.
Maecenas condimentum massa vitae quam interdum, et
lacinia urna tempor
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabProfile'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Pellentesque pulvinar, sapien eget fermentum sodales,
felis lacus viverra magna, id pulvinar odio metus non
enim. Ut id augue interdum, ultrices felis eu,
tincidunt libero.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabMessages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Cras iaculis ipsum quis lectus faucibus, in mattis
nulla molestie. Vestibulum vel tristique libero. Morbi
vulputate odio at viverra sodales. Curabitur accumsan
justo eu libero porta ultrices vitae eu leo.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabSettings'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Etiam nec ante eget lacus vulputate egestas non
iaculis tellus. Suspendisse tempus ex in tortor
venenatis malesuada. Aenean consequat dui vitae nibh
lobortis condimentum. Duis vel risus est.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{activeTab:&apos;tabHome&apos;}&quot; class=&quot;tabs flex flex-col&quot;&gt;&#13;&#10; &lt;div class=&quot;is-scrollbar-hidden overflow-x-auto&quot;&gt;&#13;&#10; &lt;div class=&quot;tabs-list flex&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabHome&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabHome&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Home&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabProfile&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabProfile&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Profile&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabMessages&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabMessages&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Messages&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabSettings&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabSettings&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Settings&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;tab-content pt-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabHome&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent&#13;&#10; elementum finibus arcu vitae scelerisque. Etiam rutrum blandit&#13;&#10; condimentum. Maecenas condimentum massa vitae quam interdum, et&#13;&#10; lacinia urna tempor&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabProfile&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus&#13;&#10; viverra magna, id pulvinar odio metus non enim. Ut id augue&#13;&#10; interdum, ultrices felis eu, tincidunt libero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabMessages&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.&#13;&#10; Vestibulum vel tristique libero. Morbi vulputate odio at viverra&#13;&#10; sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu&#13;&#10; leo.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabSettings&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Etiam nec ante eget lacus vulputate egestas non iaculis tellus.&#13;&#10; Suspendisse tempus ex in tortor venenatis malesuada. Aenean&#13;&#10; consequat dui vitae nibh lobortis condimentum. Duis vel risus est.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Border Bottom -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Border Bottom
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Tabs make it easy to explore and switch between different views.
Check out code for detail of usage.
</p>
<div class="mt-5">
<div x-data="{ activeTab: 'tabHome' }" class="tabs flex flex-col">
<div class="is-scrollbar-hidden overflow-x-auto">
<div class="border-b-2 border-slate-150 dark:border-navy-500">
<div class="tabs-list flex">
<button @click="activeTab = 'tabHome'"
:class="activeTab === 'tabHome' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Home
</button>
<button @click="activeTab = 'tabProfile'"
:class="activeTab === 'tabProfile' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Profile
</button>
<button @click="activeTab = 'tabMessages'"
:class="activeTab === 'tabMessages' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Messages
</button>
<button @click="activeTab = 'tabSettings'"
:class="activeTab === 'tabSettings' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Settings
</button>
</div>
</div>
</div>
<div class="tab-content pt-4">
<div x-show="activeTab === 'tabHome'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent elementum finibus arcu vitae
scelerisque. Etiam rutrum blandit condimentum.
Maecenas condimentum massa vitae quam interdum, et
lacinia urna tempor
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabProfile'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Pellentesque pulvinar, sapien eget fermentum sodales,
felis lacus viverra magna, id pulvinar odio metus non
enim. Ut id augue interdum, ultrices felis eu,
tincidunt libero.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabMessages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Cras iaculis ipsum quis lectus faucibus, in mattis
nulla molestie. Vestibulum vel tristique libero. Morbi
vulputate odio at viverra sodales. Curabitur accumsan
justo eu libero porta ultrices vitae eu leo.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabSettings'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Etiam nec ante eget lacus vulputate egestas non
iaculis tellus. Suspendisse tempus ex in tortor
venenatis malesuada. Aenean consequat dui vitae nibh
lobortis condimentum. Duis vel risus est.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{activeTab:&apos;tabHome&apos;}&quot; class=&quot;tabs flex flex-col&quot;&gt;&#13;&#10; &lt;div class=&quot;is-scrollbar-hidden overflow-x-auto&quot;&gt;&#13;&#10; &lt;div class=&quot;border-b-2 border-slate-150 dark:border-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;tabs-list flex&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabHome&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabHome&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Home&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabProfile&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabProfile&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Profile&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabMessages&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabMessages&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Messages&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabSettings&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabSettings&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Settings&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;tab-content pt-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabHome&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent&#13;&#10; elementum finibus arcu vitae scelerisque. Etiam rutrum blandit&#13;&#10; condimentum. Maecenas condimentum massa vitae quam interdum, et&#13;&#10; lacinia urna tempor&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabProfile&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus&#13;&#10; viverra magna, id pulvinar odio metus non enim. Ut id augue&#13;&#10; interdum, ultrices felis eu, tincidunt libero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabMessages&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.&#13;&#10; Vestibulum vel tristique libero. Morbi vulputate odio at viverra&#13;&#10; sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu&#13;&#10; leo.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabSettings&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(0,1rem,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Etiam nec ante eget lacus vulputate egestas non iaculis tellus.&#13;&#10; Suspendisse tempus ex in tortor venenatis malesuada. Aenean&#13;&#10; consequat dui vitae nibh lobortis condimentum. Duis vel risus est.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Tab With Icon -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Tab With Icon
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Tabs make it easy to explore and switch between different views.
Check out code for detail of usage.
</p>
<div class="mt-5">
<div x-data="{ activeTab: 'tabProfile' }" class="tabs flex flex-col">
<div class="is-scrollbar-hidden overflow-x-auto">
<div class="border-b-2 border-slate-150 dark:border-navy-500">
<div class="tabs-list -mb-0.5 flex">
<button @click="activeTab = 'tabHome'"
:class="activeTab === 'tabHome' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span>Home</span>
</button>
<button @click="activeTab = 'tabProfile'"
:class="activeTab === 'tabProfile' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span>Profile</span>
</button>
<button @click="activeTab = 'tabMessages'"
:class="activeTab === 'tabMessages' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span> Messages </span>
</button>
</div>
</div>
</div>
<div class="tab-content pt-4">
<div x-show="activeTab === 'tabHome'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Pellentesque pulvinar, sapien eget fermentum sodales,
felis lacus viverra magna, id pulvinar odio metus non
enim. Ut id augue interdum, ultrices felis eu,
tincidunt libero.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabProfile'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Cras iaculis ipsum quis lectus faucibus, in mattis
nulla molestie. Vestibulum vel tristique libero. Morbi
vulputate odio at viverra sodales. Curabitur accumsan
justo eu libero porta ultrices vitae eu leo.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabMessages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Etiam nec ante eget lacus vulputate egestas non
iaculis tellus. Suspendisse tempus ex in tortor
venenatis malesuada. Aenean consequat dui vitae nibh
lobortis condimentum. Duis vel risus est.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{activeTab:&apos;tabProfile&apos;}&quot; class=&quot;tabs flex flex-col&quot;&gt;&#13;&#10; &lt;div class=&quot;is-scrollbar-hidden overflow-x-auto&quot;&gt;&#13;&#10; &lt;div class=&quot;border-b-2 border-slate-150 dark:border-navy-500&quot;&gt;&#13;&#10; &lt;div class=&quot;tabs-list -mb-0.5 flex&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabHome&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabHome&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt;Home&lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabProfile&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabProfile&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt;Profile&lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabMessages&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabMessages&apos; ? &apos;border-primary dark:border-accent text-primary dark:text-accent-light&apos; : &apos;border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt; Messages &lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;tab-content pt-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabHome&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus&#13;&#10; viverra magna, id pulvinar odio metus non enim. Ut id augue&#13;&#10; interdum, ultrices felis eu, tincidunt libero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabProfile&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.&#13;&#10; Vestibulum vel tristique libero. Morbi vulputate odio at viverra&#13;&#10; sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu&#13;&#10; leo.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabMessages&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Etiam nec ante eget lacus vulputate egestas non iaculis tellus.&#13;&#10; Suspendisse tempus ex in tortor venenatis malesuada. Aenean&#13;&#10; consequat dui vitae nibh lobortis condimentum. Duis vel risus est.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Boxed Tabs -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Boxed Tabs
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Tabs make it easy to explore and switch between different views.
Check out code for detail of usage.
</p>
<div class="mt-5">
<div x-data="{ activeTab: 'tabHome' }" class="tabs flex flex-col">
<div
class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200">
<div class="tabs-list flex px-1.5 py-1">
<button @click="activeTab = 'tabHome'"
:class="activeTab === 'tabHome' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 px-3 py-1.5 font-medium">
Home
</button>
<button @click="activeTab = 'tabProfile'"
:class="activeTab === 'tabProfile' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 px-3 py-1.5 font-medium">
Profile
</button>
<button @click="activeTab = 'tabMessages'"
:class="activeTab === 'tabMessages' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 px-3 py-1.5 font-medium">
Messages
</button>
<button @click="activeTab = 'tabSettings'"
:class="activeTab === 'tabSettings' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 px-3 py-1.5 font-medium">
Settings
</button>
</div>
</div>
<div class="tab-content pt-4">
<div x-show="activeTab === 'tabHome'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent elementum finibus arcu vitae
scelerisque. Etiam rutrum blandit condimentum.
Maecenas condimentum massa vitae quam interdum, et
lacinia urna tempor
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabProfile'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Pellentesque pulvinar, sapien eget fermentum sodales,
felis lacus viverra magna, id pulvinar odio metus non
enim. Ut id augue interdum, ultrices felis eu,
tincidunt libero.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabMessages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Cras iaculis ipsum quis lectus faucibus, in mattis
nulla molestie. Vestibulum vel tristique libero. Morbi
vulputate odio at viverra sodales. Curabitur accumsan
justo eu libero porta ultrices vitae eu leo.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabSettings'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Etiam nec ante eget lacus vulputate egestas non
iaculis tellus. Suspendisse tempus ex in tortor
venenatis malesuada. Aenean consequat dui vitae nibh
lobortis condimentum. Duis vel risus est.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{activeTab:&apos;tabHome&apos;}&quot; class=&quot;tabs flex flex-col&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;tabs-list flex px-1.5 py-1&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabHome&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabHome&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Home&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabProfile&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabProfile&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Profile&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabMessages&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabMessages&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Messages&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabSettings&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabSettings&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; Settings&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;tab-content pt-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabHome&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent&#13;&#10; elementum finibus arcu vitae scelerisque. Etiam rutrum blandit&#13;&#10; condimentum. Maecenas condimentum massa vitae quam interdum, et&#13;&#10; lacinia urna tempor&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabProfile&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus&#13;&#10; viverra magna, id pulvinar odio metus non enim. Ut id augue&#13;&#10; interdum, ultrices felis eu, tincidunt libero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabMessages&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.&#13;&#10; Vestibulum vel tristique libero. Morbi vulputate odio at viverra&#13;&#10; sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu&#13;&#10; leo.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabSettings&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Etiam nec ante eget lacus vulputate egestas non iaculis tellus.&#13;&#10; Suspendisse tempus ex in tortor venenatis malesuada. Aenean&#13;&#10; consequat dui vitae nibh lobortis condimentum. Duis vel risus est.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
<!-- Boxed Tabs With Icon -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Boxed Tabs With Icon
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
<input @change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</label>
</div>
<div class="max-w-xl">
<p>
Tabs make it easy to explore and switch between different views.
Check out code for detail of usage.
</p>
<div class="mt-5">
<div x-data="{ activeTab: 'tabHome' }" class="tabs flex flex-col">
<div
class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200">
<div class="tabs-list flex px-1.5 py-1">
<button @click="activeTab = 'tabHome'"
:class="activeTab === 'tabHome' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span> Home </span>
</button>
<button @click="activeTab = 'tabProfile'"
:class="activeTab === 'tabProfile' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span>Profile</span>
</button>
<button @click="activeTab = 'tabMessages'"
:class="activeTab === 'tabMessages' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span>Messages</span>
</button>
</div>
</div>
<div class="tab-content pt-4">
<div x-show="activeTab === 'tabHome'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Etiam nec ante eget lacus vulputate egestas non
iaculis tellus. Suspendisse tempus ex in tortor
venenatis malesuada. Aenean consequat dui vitae nibh
lobortis condimentum. Duis vel risus est.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabProfile'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Cras iaculis ipsum quis lectus faucibus, in mattis
nulla molestie. Vestibulum vel tristique libero. Morbi
vulputate odio at viverra sodales. Curabitur accumsan
justo eu libero porta ultrices vitae eu leo.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
<div x-show="activeTab === 'tabMessages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div>
<p>
Pellentesque pulvinar, sapien eget fermentum sodales,
felis lacus viverra magna, id pulvinar odio metus non
enim. Ut id augue interdum, ultrices felis eu,
tincidunt libero.
</p>
<div class="flex space-x-2 pt-3">
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 1
</a>
<a href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
Tag 2
</a>
</div>
<p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Tempore dolore non atque?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
<code class="language-html" x-ignore>
&lt;div x-data=&quot;{activeTab:&apos;tabHome&apos;}&quot; class=&quot;tabs flex flex-col&quot;&gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;tabs-list flex px-1.5 py-1&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabHome&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabHome&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt; Home &lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabProfile&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabProfile&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt;Profile&lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;activeTab = &apos;tabMessages&apos;&quot;&#13;&#10; :class=&quot;activeTab === &apos;tabMessages&apos; ? &apos;bg-white shadow dark:bg-navy-500 dark:text-navy-100&apos; : &apos;hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100&apos;&quot;&#13;&#10; class=&quot;btn shrink-0 space-x-2 px-3 py-1.5 font-medium&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4.5 w-4.5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; d=&quot;M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt;Messages&lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;tab-content pt-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabHome&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Etiam nec ante eget lacus vulputate egestas non iaculis tellus.&#13;&#10; Suspendisse tempus ex in tortor venenatis malesuada. Aenean&#13;&#10; consequat dui vitae nibh lobortis condimentum. Duis vel risus est.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabProfile&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.&#13;&#10; Vestibulum vel tristique libero. Morbi vulputate odio at viverra&#13;&#10; sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu&#13;&#10; leo.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div&#13;&#10; x-show=&quot;activeTab === &apos;tabMessages&apos;&quot;&#13;&#10; x-transition:enter=&quot;transition-all duration-500 easy-in-out&quot;&#13;&#10; x-transition:enter-start=&quot;opacity-0 [transform:translate3d(1rem,0,0)]&quot;&#13;&#10; x-transition:enter-end=&quot;opacity-100 [transform:translate3d(0,0,0)]&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&gt;&#13;&#10; &lt;p&gt;&#13;&#10; Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus&#13;&#10; viverra magna, id pulvinar odio metus non enim. Ut id augue&#13;&#10; interdum, ultrices felis eu, tincidunt libero.&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 1&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10; &gt;&#13;&#10; Tag 2&#13;&#10; &lt;/a&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;p class=&quot;pt-3 text-xs text-slate-400 dark:text-navy-300&quot;&gt;&#13;&#10; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore&#13;&#10; dolore non atque?&#13;&#10; &lt;/p&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; </code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>