Basic Alert

Dismiss Alert

Alert with Link

Alert with action button

<!-- Basic Alert -->
<div class="flex gafhbnc relative bg-red-50 dark:bg-red-500/20 text-red-700 dark:text-red-400 py-3 px-6 rounded mb-4">
  <i class='bi bi-info-circle me-2'></i>
  <p>This is a danger alert—check it out!</p>
</div>
<div class="flex gafhbnc relative bg-yellow-50 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 py-3 px-6 rounded mb-4">
  <i class='bi bi-info-circle me-2'></i>
  <p>This is a warning alert—check it out!</p>
</div>
<div class="flex gafhbnc relative bg-lime-50 dark:bg-lime-500/20 text-lime-700 dark:text-lime-400 py-3 px-6 rounded mb-4">
  <i class='bi bi-info-circle me-2'></i>
  <p>This is a success alert—check it out!</p>
</div>
<div class="flex gafhbnc relative bg-indigo-50 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-400 py-3 px-6 rounded mb-4">
  <i class='bi bi-info-circle me-2'></i>
  <p>This is a info alert—check it out!</p>
</div>

<!-- Dismiss Alert -->
<div x-data="{ open: true }" x-show="open" class="flex agjstda gafhbnc relative bg-lime-50 dark:bg-lime-500/20 text-lime-700 dark:text-lime-400 py-3 px-6 rounded mb-4">
  <div class="flex gafhbnc">
    <i class='bi bi-info-circle me-2'></i>
    <p>You should check in on some of those fields below.</p>
  </div>
  <button type="button" @click="open = false">
    <span class="text-2xl">×</span>
  </button>
</div>

<!-- Alert with Link -->
<div x-data="{ open: true }" x-show="open" class="flex agjstda gafhbnc relative bg-yellow-50 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 py-3 px-6 rounded mb-4">
  <div>
    <a href="#" class="underline font-bold">Dismiss Warning!</a> You should check in on some of those fields below.
  </div>
  <button type="button" @click="open = false">
    <span class="text-2xl">×</span>
  </button>
</div>

<!-- Alert with action button -->
<div x-data="{ open: true }" x-show="open" class="flex agjstda gafhbnc relative bg-red-50 dark:bg-red-500/20 text-red-700 dark:text-red-400 py-3 px-6 rounded mb-4">
  <div>
    <div class="flex evfdsaj agjstda">
      <h3 class="text-lg font-bold mb-2">Warning</h3>

      <button type="button" @click="open = false">
        <span class="text-2xl">×</span>
      </button>
    </div>
    <p class="mb-6 me-6">Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
    <a href="#" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-red-500 border border-red-500 hover:text-white hover:bg-red-600 hover:ring-0 hover:border-red-600 focus:bg-red-600 focus:border-red-600 focus:outline-none focus:ring-0">Take this action!</a>
  </div>
</div>

<!-- Avatar rounded -->
<img class="inline-block rounded-full shadow w-8 h-8 max-w-full bg-neutral-300 dark:bg-neutral-800" src="../src/img/avatar/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow w-12 h-12 max-w-full bg-neutral-300 dark:bg-neutral-800" src="../src/img/avatar/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow w-16 h-16 max-w-full bg-neutral-300 dark:bg-neutral-800" src="../src/img/avatar/avatar.png" alt="Image Description">

<!-- Avatar group -->
<div class="relative">
  <a href="#">
    <img class="inline-block rounded-full shadow w-10 h-10 max-w-full bg-neutral-300 dark:bg-neutral-800 -me-4 border-2 border-neutral-200 dark:border-neutral-700 transform hover:-translate-y-1" src="../src/img/avatar/avatar.png" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-block rounded-full shadow w-10 h-10 max-w-full bg-neutral-300 dark:bg-neutral-800 -me-4 border-2 border-neutral-200 dark:border-neutral-700 transform hover:-translate-y-1" src="../src/img/avatar/avatar.png" alt="Image Description">
  </a>
  <a href="#">
    <img class="inline-block rounded-full shadow w-10 h-10 max-w-full bg-neutral-300 dark:bg-neutral-800 -me-4 border-2 border-neutral-200 dark:border-neutral-700 transform hover:-translate-y-1" src="../src/img/avatar/avatar.png" alt="Image Description">
  </a>
</div>

Heading with badge

Example heading New

Example heading New

Badge default

Badge Soft

<!-- Heading with badge -->
<h4 class="text-2xl leading-normal mb-2">Example heading <span class="inline-flex qjdklap leading-none py-1 px-2 bg-orange-500 text-neutral-100 font-light rounded text-sm">New</span></h4>
<h5 class="text-lg leading-normal mb-2">Example heading <span class="inline-flex qjdklap leading-none py-0.5 px-1.5 bg-orange-500 text-neutral-100 font-light rounded text-sm">New</span></h5>

<!-- Badge -->
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-orange-500 text-neutral-100 font-light rounded">Primary</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-red-500 text-neutral-100 font-light rounded">Danger</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-yellow-300 text-neutral-900 font-light rounded">Warning</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-lime-500 text-neutral-100 font-light rounded">Success</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-orange-300 text-neutral-900 font-light rounded">Info</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-neutral-100 text-neutral-900 font-light rounded">Light</span>
<span class="inline-flex qjdklap leading-none text-sm py-1 px-2 bg-black text-neutral-100 font-light rounded">Dark</span>

<!-- Badge Soft -->
<span class="inline-flex qjdklap px-2 py-1 bg-orange-100 text-orange-700 dark:bg-orange-500/50 dark:text-orange-100 text-sm leading-none font-medium rounded">Primary</span>
<span class="inline-flex qjdklap px-2 py-1 bg-lime-100 text-lime-700 dark:bg-lime-500/50 dark:text-lime-100 text-sm leading-none font-medium rounded">Success</span>
<span class="inline-flex qjdklap px-2 py-1 bg-yellow-100 text-yellow-700 dark:bg-yellow-500/50 dark:text-yellow-100 text-sm leading-none font-medium rounded">Warning</span>
<span class="inline-flex qjdklap px-2 py-1 bg-red-100 text-red-700 dark:bg-red-500/50 dark:text-red-100 text-sm leading-none font-medium rounded">Danger</span>
<span class="inline-flex qjdklap px-2 py-1 bg-indigo-100 text-indigo-700 dark:bg-indigo-500/50 dark:text-indigo-100 text-sm leading-none font-medium rounded">Info</span>

<nav aria-label="breadcrumb" class="mb-4">
  <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
    <li>
      <a href="#" class="text-neutral-700 dark:text-neutral-100 hover:text-orange-500">
        Home
        <i class="bi rtl:rotate-180 bi-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li>
      <a href="#" class="text-neutral-700 dark:text-neutral-100 hover:text-orange-500">
        Category
        <i class="bi rtl:rotate-180 bi-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li class="hidden md:block text-orange-500" aria-current="page">Business</li>
  </ol>
</nav>

Button

Gradient Button

Animation & Disabled Button

Button Size

Button Group

Button group vertical

<!-- Button -->
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-lime-500 border border-lime-500 hover:text-white hover:bg-lime-600 hover:ring-0 hover:border-lime-600 focus:bg-lime-600 focus:border-lime-600 focus:outline-none focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-red-500 border border-red-500 hover:text-white hover:bg-red-600 hover:ring-0 hover:border-red-600 focus:bg-red-600 focus:border-red-600 focus:outline-none focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-800 bg-yellow-300 border border-yellow-300 hover:text-neutral-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0">Warning</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-800 bg-orange-300 border border-orange-300 hover:text-neutral-900 hover:bg-orange-500 hover:ring-0 hover:border-orange-500 focus:bg-orange-500 focus:border-orange-500 focus:outline-none focus:ring-0">Info</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-800 bg-neutral-100 border border-neutral-100 hover:text-neutral-900 hover:bg-neutral-200 hover:ring-0 hover:border-neutral-200 focus:bg-neutral-200 focus:border-neutral-200 focus:outline-none focus:ring-0">Light</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-neutral-900 border border-neutral-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>

<!-- Outline Button -->
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-orange-500 bg-transparent border border-orange-500 hover:text-neutral-100 hover:bg-orange-500 hover:ring-0 hover:border-orange-500 focus:text-neutral-100 focus:bg-orange-500 focus:border-orange-500 focus:outline-none focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-lime-500 bg-transparent border border-lime-500 hover:text-white hover:bg-lime-500 hover:ring-0 hover:border-lime-500 focus:text-white focus:bg-lime-500 focus:border-lime-500 focus:outline-none focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-red-500 bg-transparent border border-red-500 hover:text-white hover:bg-red-500 hover:ring-0 hover:border-red-500 focus:text-white focus:bg-red-500 focus:border-red-500 focus:outline-none focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-yellow-500 bg-transparent border border-yellow-500 hover:text-neutral-100 hover:bg-yellow-500 hover:ring-0 hover:border-yellow-500 focus:text-neutral-900 focus:bg-yellow-500 focus:border-yellow-500 focus:outline-none focus:ring-0">Warning</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-orange-300 bg-transparent border border-orange-300 hover:text-neutral-900 hover:bg-orange-300 hover:ring-0 hover:border-orange-300 focus:text-neutral-900 focus:bg-orange-300 focus:border-orange-300 focus:outline-none focus:ring-0">Info</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-700 bg-transparent border border-neutral-100 hover:text-neutral-900 hover:bg-neutral-200 hover:ring-0 hover:border-neutral-200 focus:text-neutral-900 focus:bg-neutral-200 focus:border-neutral-200 focus:outline-none focus:ring-0">Light</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-900 bg-transparent border border-neutral-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:text-white focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>

<!-- Gradient Button -->
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 bg-gradient-to-b from-orange-400 to-orange-600 hover:bg-orange-600 hover:from-orange-500 hover:to-orange-600 focus:from-orange-400 focus:to-orange-600 hover:text-white hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-lime-500 border border-lime-500 bg-gradient-to-b from-lime-400 to-lime-600 hover:bg-lime-600 hover:from-lime-500 hover:to-lime-600 focus:from-lime-500 focus:to-lime-600 hover:text-white hover:ring-0 hover:border-lime-600 focus:bg-lime-600 focus:border-lime-600 focus:outline-none focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-red-500 border border-red-500 bg-gradient-to-b from-red-400 to-red-600 hover:bg-red-600 hover:from-red-500 hover:to-red-600 focus:from-red-500 focus:to-red-600 hover:text-white hover:ring-0 hover:border-red-600 focus:bg-red-600 focus:border-red-600 focus:outline-none focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-yellow-500 border border-yellow-500 bg-gradient-to-b from-yellow-400 to-yellow-600 hover:bg-yellow-600 hover:from-yellow-500 hover:to-yellow-600 focus:from-yellow-500 focus:to-yellow-600 hover:text-white hover:ring-0 hover:border-yellow-600 focus:bg-yellow-600 focus:border-yellow-600 focus:outline-none focus:ring-0">Warning</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-300 bg-gradient-to-b from-orange-300 to-orange-500 hover:bg-orange-600 hover:from-orange-300 hover:to-orange-500 focus:from-orange-300 focus:to-orange-500 hover:text-white hover:ring-0 hover:border-orange-500 focus:bg-orange-400 focus:border-orange-400 focus:outline-none focus:ring-0">Info</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-800 bg-neutral-100 border border-neutral-100 bg-gradient-to-b from-neutral-100 to-neutral-300 hover:bg-neutral-200 hover:from-neutral-300 hover:to-neutral-100 focus:from-neutral-300 focus:to-neutral-100 hover:text-neutral-900 hover:ring-0 hover:border-neutral-200 focus:bg-neutral-200 focus:border-neutral-200 focus:outline-none focus:ring-0">Light</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-neutral-800 border border-neutral-800 bg-gradient-to-b from-neutral-700 to-neutral-900 hover:bg-neutral-800 hover:from-neutral-900 hover:to-neutral-700 focus:from-neutral-900 focus:to-neutral-700 hover:text-white hover:ring-0 hover:border-neutral-900 focus:bg-neutral-900 focus:border-neutral-900 focus:outline-none focus:ring-0">Dark</button>

<!-- button animate -->
<div class="relative inline-flex border-rotate p-0.5 rounded zvgdfhg">
  <button class="py-2 px-6 inline-flex gafhbnc qjdklap gap-2.5 text-white font-medium bg-gradient-to-b from-orange-400 to-orange-600/90  hover:from-orange-400 hover:to-orange-600 focus:from-orange-400 focus:to-orange-600 focus:ring-0 rounded shadow-outset-sm z-10">
    Get it now <i class="bi bi-arrow-right"></i>
  </button>
</div>

<!-- Disabled Button -->
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 me-2 cursor-not-allowed opacity-70" disabled>Disabled</button>

<!-- Button Size -->
<button type="button" class="text-sm py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Small</button>
<button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Normal</button>
<button type="button" class="text-2xl py-4 px-8 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Large</button>

<!-- button group -->
<div class="inline-flex me-3" role="group">
  <button type="button" class="rounded-l py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -me-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -ms-0.5">Right</button>
</div>

<!-- outline button group -->
<div class="inline-flex" role="group">
  <button type="button" class="rounded-l py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -me-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -ms-0.5">Right</button>
</div>

<!-- button group vertical -->
<div class="flex djksgia float-left w-32 me-4 mb-4" role="group">
  <button type="button" class="rounded-t py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-b py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
</div><div class="clear-both"></div>

<!-- outline button group vertical -->
<div class="flex djksgia float-left w-32 ms-8" role="group">
  <button type="button" class="rounded-t py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-b py-2 px-4 inline-flex gafhbnc qjdklap gap-2 leading-normal text-orange-500 bg-white dark:bg-neutral-800 border border-orange-500 hover:text-neutral-100 hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:text-neutral-100 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
</div>

<!-- html -->
<div class="splide nav-hidden" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide py-32 px-12 bg-neutral-50 dark:bg-neutral-800 text-center">Slide 01</li>
      <li class="splide__slide py-32 px-12 bg-neutral-50 dark:bg-neutral-800 text-center">Slide 02</li>
      <li class="splide__slide py-32 px-12 bg-neutral-50 dark:bg-neutral-800 text-center">Slide 03</li>
    </ul>
  </div>
</div>

<!-- Collapse -->
<div x-data="{open:false}">
  <p class="flex">
    <a x-on:click.prevent="open=!open" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
    Link with href
    </a>
    <button  @click="open=!open" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0" type="button">
    Button with data-target
    </button>
  </p>
  <div x-show="open" class="border px-4 py-3 my-2 dark:border-neutral-700">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

• To Do

  • Task 1

  • Task 2

  • Task 3

• Doing

  • Task 4

  • Task 5

  • Task 6

• Done

  • Task 7

  • Task 8

  • Task 9

• Trash

  • Task 10

  • Task 11

<!-- html -->
<ul class="dragula flex evfdsaj">
  <li class="flex-shrink w-1/2 md:w-1/4 to-do-column">
    <div class="p-4 bg-purple-500/20 mb-2">
      <h4>To Do</h4>
    </div>
    <ul class="px-1 pb-1 bg-neutral-50 dark:bg-black" id="to-do">
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 1</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 2</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 3</p>
      </li>
    </ul>
  </li>
  <li class="flex-shrink w-1/2 md:w-1/4 doing-column">
    <div class="p-4 bg-blue-500/20 mb-2">
      <h4>Doing</h4>
    </div>
    <ul class="px-1 pb-1 bg-neutral-50 dark:bg-black" id="doing">
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 4</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 5</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 6</p>
      </li>
    </ul>
  </li>
  <li class="flex-shrink w-1/2 md:w-1/4 done-column">
    <div class="p-4 bg-lime-500/20 mb-2">
      <h4>Done</h4>
    </div>
    <ul class="px-1 pb-1 bg-neutral-50 dark:bg-black" id="done">
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 7</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 8</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 9</p>
      </li>
    </ul>
  </li>
  <li class="flex-shrink w-1/2 md:w-1/4 trash-column">
    <div class="p-4 bg-red-500/20 mb-2">
      <h4>Trash</h4>
    </div>
    <ul class="px-1 pb-1 bg-neutral-50 dark:bg-black" id="trash">
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 10</p>
      </li>
      <li class="drop-item cursor-move border border-neutral-200 dark:border-neutral-700 mb-1 px-4 py-2 bg-white dark:bg-neutral-800">
        <p>Task 11</p>
      </li>
    </ul>
  </li>
</ul>

<!-- default dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-neutral-100" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" class="oousjgk bg-white z-10 rounded border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700" style="min-width:12rem">
      <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Action</a>
      <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Another action</a>
      <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Something else here</a>
      <hr class="border-t border-neutral-200 dark:border-neutral-700 my-0">
      <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Separated link</a>
  </div>
</div>

<!-- up dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-neutral-100 transform rotate-180" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" class="oousjgk start-0 bottom-full top-auto bg-white z-10 rounded border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Something else here</a>
    <hr class="border-t border-neutral-200 dark:border-neutral-700 my-0">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Separated link</a>
  </div>
</div>

<!-- right dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-neutral-100 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" class="oousjgk top-0 start-full end-auto bg-white z-10 rounded border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Something else here</a>
    <hr class="border-t border-neutral-200 dark:border-neutral-700 my-0">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Separated link</a>
  </div>
</div>

<!-- right dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0">
    <svg class="fill-current text-neutral-100 transform rotate-90" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <span class="pl-2">Dropdown</span>
  </button>
  <div x-show="show" @click.away="show = false" class="oousjgk top-0 end-full start-auto bg-white z-10 rounded border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Something else here</a>
    <hr class="border-t border-neutral-200 dark:border-neutral-700 my-0">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Separated link</a>
  </div>
</div>

<!-- Split dropdown -->
<div x-data="{ show: false }" class="relative inline-flex me-2" role="group">
  <button type="button" class="flex py-2 px-4 text-center rounded-l leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0 -me-0.5">
    <span class="pr-2">Dropdown</span>
  </button>
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-r leading-normal text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-700 hover:ring-0 hover:border-orange-700 focus:bg-orange-700 focus:border-orange-700 focus:outline-none focus:ring-0 -ms-0.5">
    <svg class="fill-current text-neutral-100" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" class="oousjgk top-full bottom-auto start-0 bg-white z-10 rounded border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Something else here</a>
    <hr class="border-t border-neutral-200 dark:border-neutral-700 my-0">
    <a class="block px-3 py-2 hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-neutral-900 dark:focus:bg-neutral-900" href="#">Separated link</a>
  </div>
</div>

2 Layouts option

Default

Compact

There are 2 layout options that are ready to use.

Responsive Grid

You can edit responsive grid column with change grid cols css blkgfja sm:mvdsdfu lg:grid-cols-4

Responsive Flex

You can edit responsive flex with change width css w-full lg:w-1/3 xl:w-1/5

You can see complete width of Tailwind css in here Tailwindcss Width

<!-- Container -->
<div class="container xl:max-w-6xl mx-auto px-4">
  <!-- Content here -->
</div>

<!-- grid 3 -->
<div class="grid blkgfja lg:grid-cols-3 gap-4 lg:gap-6 mb-4">
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div>    
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div> 
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div>
  </div>
</div>

<!-- grid 4 -->
<div class="grid blkgfja sm:mvdsdfu xl:grid-cols-4 gap-4 lg:gap-6 mb-4">
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>    
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div> 
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>
  </div>
</div>

<!-- grid 5 -->
<div class="grid blkgfja sm:mvdsdfu lg:grid-cols-4 xl:grid-cols-5 gap-4 lg:gap-6 mb-4">
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>    
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div> 
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
  <div class="border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
</div>

<!-- Row -->
<div class="flex flex-wrap evfdsaj mb-4">
  <!-- your flex grid code in here -->
</div>

<!-- Row and 3 flex grid column-->
<div class="flex flex-wrap evfdsaj mb-4">
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div>    
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div> 
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/3</div>
  </div>
</div>

<!-- Row and 4 flex Grid column-->
<div class="flex flex-wrap evfdsaj mb-4">
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/4 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>    
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/4 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div> 
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/4 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/4 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/4</div>
  </div>
</div>

<!-- Row and 5 flex Grid column-->
<div class="flex flex-wrap evfdsaj mb-4">
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>    
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div> 
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800">
     <div class="p-5 h-20 w-full">.w-1/5</div>
  </div>
</div>

• An item 14
• A second item 14
• A third item 14
• A fourth item 14
• And a fifth one 14

<!-- List group -->
<ul class="px-0 border-b border-neutral-200 dark:border-neutral-700 -space-y-px">
  <li class="relative">
    <a class="active border border-neutral-200 dark:border-neutral-700 bg-gradient-to-tr [&.active]:text-orange-500 [&.active]:from-orange-500/10 [&.active]:to-orange-500/[.01] hover:from-orange-500/10 hover:to-orange-500/[.05] hover:text-orange-500 list-none rounded-sm py-3 px-4 flex agjstda gafhbnc" href="#">
      An item
      <span class="text-sm py-1 px-2 bg-orange-100 dark:bg-orange-50/10 text-orange-500 shadow-sm phfjsdf">14</span>
    </a>
  </li>
  <li class="relative">
    <a class="border border-neutral-200 dark:border-neutral-700 bg-gradient-to-tr [&.active]:text-orange-500 [&.active]:from-orange-500/10 [&.active]:to-orange-500/[.01] hover:from-orange-500/10 hover:to-orange-500/[.05] hover:text-orange-500 list-none rounded-sm py-3 px-4 flex agjstda gafhbnc" href="#">
      A second item
      <span class="text-sm py-1 px-2 bg-orange-100 dark:bg-orange-50/10 text-orange-500 shadow-sm phfjsdf">14</span>
    </a>
  </li>
  <li class="relative">
    <a class="border border-neutral-200 dark:border-neutral-700 bg-gradient-to-tr [&.active]:text-orange-500 [&.active]:from-orange-500/10 [&.active]:to-orange-500/[.01] hover:from-orange-500/10 hover:to-orange-500/[.05] hover:text-orange-500 list-none rounded-sm py-3 px-4 flex agjstda gafhbnc" href="#">
      A third item
      <span class="text-sm py-1 px-2 bg-orange-100 dark:bg-orange-50/10 text-orange-500 shadow-sm phfjsdf">14</span>
    </a>
  </li>
  <li class="relative">
    <a class="border border-neutral-200 dark:border-neutral-700 bg-gradient-to-tr [&.active]:text-orange-500 [&.active]:from-orange-500/10 [&.active]:to-orange-500/[.01] hover:from-orange-500/10 hover:to-orange-500/[.05] hover:text-orange-500 list-none rounded-sm py-3 px-4 flex agjstda gafhbnc" href="#">
      A fourth item
      <span class="text-sm py-1 px-2 bg-orange-100 dark:bg-orange-50/10 text-orange-500 shadow-sm phfjsdf">14</span>
    </a>
  </li>
  <li class="relative">
    <a class="border border-neutral-200 dark:border-neutral-700 bg-gradient-to-tr [&.active]:text-orange-500 [&.active]:from-orange-500/10 [&.active]:to-orange-500/[.01] hover:from-orange-500/10 hover:to-orange-500/[.05] hover:text-orange-500 list-none rounded-sm py-3 px-4 flex agjstda gafhbnc" href="#">
      And a fifth one
      <span class="text-sm py-1 px-2 bg-orange-100 dark:bg-orange-50/10 text-orange-500 shadow-sm phfjsdf">14</span>
    </a>
  </li>
</ul>

<!-- Modal -->
<div x-data="{ open: false }">
  <!-- Button trigger modal -->
  <button @click="open = true" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Launch Modal</Button>

  <!-- Modal -->
  <div x-show="open" tabindex="0" class="z-50 overflow-auto inset-0 w-full h-full wpajskh py-6">
    <div @click.away="open = false" class="z-50 relative p-3 mx-auto my-0 max-w-full" style="width: 500px;display: none" x-show="open" x-transition:enter="transition duration-500" x-transition:enter-start="transform opacity-0 -translate-y-4" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition -translate-y-4" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 -translate-y-4">
      <div class="bg-white rounded kjjsdlo border flex djksgia zvgdfhg dark:bg-neutral-800 dark:border-neutral-700">
        <button @click="open = false" class="fill-current h-6 w-6 oousjgk end-0 top-0 m-6 font-3xl font-bold">×</button>
        <!-- modal title -->
        <div class="px-6 py-3 text-xl border-b dark:border-neutral-700 font-bold">Title of the modal</div>
        <!-- modal content -->
        <div class="p-6 flex-grow">
          <p>Woohoo, you're reading this text in a modal!</p>
        </div>
        <div class="px-6 py-3 border-t dark:border-neutral-700 flex gap-3 justify-end">
          <button @click="open = false" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-800 bg-neutral-100 border border-neutral-100 hover:text-neutral-900 hover:bg-neutral-200 hover:ring-0 hover:border-neutral-200 focus:bg-neutral-200 focus:border-neutral-200 focus:outline-none focus:ring-0">Close</Button>
          <button type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">Saves Changes</Button>
        </div>
      </div>
    </div>
    <div class="z-40 overflow-auto start-0 top-0 bottom-0 end-0 w-full h-full wpajskh bg-black opacity-50"></div>
  </div>
</div>

<!-- Navbar -->
<nav x-data="{ open: false }" class="flex flex-nowrap lg:flex-start gafhbnc z-20 top-0 start-0 end-0 bg-white dark:bg-neutral-800 overflow-y-auto max-h-screen lg:overflow-visible lg:max-h-full">
  <div class="container mx-auto px-4 xl:max-w-6xl ">
    <!-- mobile navigation -->
    <div class="flex evfdsaj agjstda py-3 lg:hidden">
      <!-- logo -->
      <a class="flex gafhbnc py-2 me-4 text-xl" href="#">
           <h2 class="flex evfdsaj gafhbnc text-2xl text-neutral-700 dark:text-neutral-100">
            <!-- icon -->
            <div class="w-8 h-8 flex qjdklap gafhbnc phfjsdf bg-gradient-to-tr from-orange-600 to-orange-400 text-orange-50">M</div>
            <!-- text -->
            <span class="ms-1.5 sidebar-small-text uppercase">Minimax</span>
          </h2>
      </a>
      <!-- navbar toggler -->
      <div class="end-0 flex gafhbnc">
        <!-- Mobile menu button-->
        <button id="navbartoggle" type="button" class="inline-flex gafhbnc qjdklap text-neutral-800 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 focus:outline-none focus:ring-0" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
          <span class="sr-only">Mobile menu</span>
          <svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>

          <svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile menu -->
    <div class="lg:hidden wpajskh w-full h-full inset-0 z-50" id="mobile-menu" x-description="Mobile menu" x-show="open" style="display: none;">
      <!-- bg open -->
      <span class="wpajskh bg-neutral-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>

      <!-- Mobile navbar -->
      <nav id="mobile-nav" class="flex djksgia end-0 w-64 wpajskh top-0 py-4 bg-white dark:bg-neutral-900 h-full overflow-auto z-40" x-show="open" @click.away="open=false" x-description="Mobile menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="navbartoggle" x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="translate-x-full rtl:-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full rtl:-translate-x-full">
        <div class="mb-auto">
          <!--logo-->
          <div class="mh-18 text-center px-12 mb-8">
            <a href="#" class="flex relative">
                <h2 class="flex evfdsaj gafhbnc text-2xl text-neutral-700 dark:text-neutral-100">
                  <!-- icon -->
                  <div class="w-8 h-8 flex qjdklap gafhbnc phfjsdf bg-gradient-to-tr from-orange-600 to-orange-400 text-orange-50">M</div>
                  <!-- text -->
                  <span class="ms-1.5 sidebar-small-text uppercase">Minimax</span>
                </h2>
            </a>
          </div>
          <!--navigation-->
          <div class="mb-4">
            <nav class="relative flex flex-wrap gafhbnc agjstda">
              <ul id="side-menu" class="w-full float-none flex djksgia">
                <li class="relative">
                  <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">Home</a>
                </li>

                <!-- Insert dropdown mobile Offcanvas menu -->

                <li class="relative">
                  <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">About</a>
                </li>
                <li class="relative">
                  <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">Services</a>
                </li>
                <li class="relative">
                  <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">Support</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <!-- copyright -->
        <div class="mt-5 text-center">
          <p>Copyright <a href="#">Minimax</a> - All right reserved</p>
        </div>
      </nav>
    </div><!-- End Mobile menu -->

    <!-- desktop menu -->
    <div class="hidden lg:flex lg:evfdsaj lg:flex-nowrap lg:gafhbnc lg:agjstda lg:mt-0" id="desktp-menu">
      <!-- logo -->
      <a class="hidden lg:flex gafhbnc py-2 me-4 text-xl" href="#">
            <h2 class="flex evfdsaj gafhbnc text-2xl text-neutral-700 dark:text-neutral-100">
              <!-- icon -->
              <div class="w-8 h-8 flex qjdklap gafhbnc phfjsdf bg-gradient-to-tr from-orange-600 to-orange-400 text-orange-50">M</div>
              <!-- text -->
              <span class="ms-1.5 sidebar-small-text uppercase">Minimax</span>
            </h2>
      </a>

      <!-- menu -->
      <ul class="flex djksgia lg:mx-auto mt-2 lg:evfdsaj lg:mt-0">
        <li class="relative">
          <!-- active -->
          <a class="group block py-3 lg:py-7 px-6 text-orange-500 hover:text-orange-600 focus:text-orange-600" href="#">
            <span class="oousjgk bottom-4 start-1/2 transform -translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-orange-600 transition duration-700 ease-in-out opacity-100"></span>
            Home
          </a>
        </li>

        <!-- Insert desktop dropdown menu -->

        <li class="relative">
          <a class="group block py-3 lg:py-7 px-6 hover:text-orange-600 focus:text-orange-600" href="#">
            <span class="oousjgk bottom-4 start-1/2 transform -translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-orange-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
            About
          </a>
        </li>
        <li class="relative">
          <a class="group block py-3 lg:py-7 px-6 hover:text-orange-600 focus:text-orange-600" href="#">
            <span class="oousjgk bottom-4 start-1/2 transform -translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-orange-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
            Services
          </a>
        </li>
        <li class="relative">
          <a class="group block py-3 lg:py-7 px-6 hover:text-orange-600 focus:text-orange-600" href="#">
            <span class="oousjgk bottom-4 start-1/2 transform -translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-orange-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
            Support
          </a>
        </li>
      </ul>

      <!-- button -->
      <div class="grid text-center lg:block my-4 lg:my-auto">
        <a class="py-2 px-4 text-sm inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0" target="_blank" rel="noopener" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" class="inline me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> Buy Now
        </a>
      </div>
    </div><!-- end desktop menu -->
  </div>
</nav>

<!-- Messages -->
<div class="relative inline-block">
  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6 bi bi-envelope" viewBox="0 0 16 16">
    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"></path>
  </svg>
  <span class="flex qjdklap oousjgk -top-2 -end-1 text-center bg-red-500 px-1 text-white rounded-full text-xs"><span class="align-self-center">3</span></span>
</div>

<!-- Notification -->
<div class="relative inline-block ms-8">
  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6 bi bi-bell" viewBox="0 0 16 16">
    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
  </svg>
  <span class="flex qjdklap oousjgk -top-2 -end-1 text-center bg-red-500 px-1 text-white rounded-full text-xs"><span class="align-self-center">1</span></span>
</div>

<!-- Avatar -->
<div class="relative inline-block ms-8">
  <img class="h-10 w-10 rounded-full border border-neutral-700 bg-neutral-700" src="../src/img/avatar/avatar.png" alt="avatar">
  <span title="online" class="flex qjdklap oousjgk -bottom-0.5 end-1 text-center bg-lime-500 border border-white w-3 h-3 rounded-full"></span>
</div>

<!-- Offcanvas button trigger -->
<button id="navbartoggle" type="button" class="inline-flex gafhbnc qjdklap text-neutral-800 hover:text-neutral-700 dark:text-neutral-400 focus:outline-none focus:ring-0" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
  <span class="sr-only">Mobile menu</span>
  <svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  </svg>

  <svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
  </svg>
  <span class="ms-3">Offcanvas</span>
</button>

<!-- Right Offcanvas -->
<div class="wpajskh w-full h-full inset-0 z-50" id="mobile-menu" x-description="Mobile menu" x-show="open" style="display: none;">
  <!-- bg open -->
  <span class="wpajskh bg-neutral-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>

  <!-- Mobile navbar -->
  <nav id="mobile-nav" class="flex djksgia end-0 w-64 wpajskh top-0 py-4 bg-white dark:bg-neutral-800 h-full overflow-auto z-40" x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu" aria-orientation="vertical" aria-labelledby="navbartoggle" x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="translate-x-full rtl:-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full rtl:-translate-x-full">
    <div class="mb-auto">
      <!--logo-->
      <div class="mh-18 text-center px-12 mb-8">
        <a href="#" class="flex relative">
          <h2 class="flex evfdsaj gafhbnc text-2xl text-neutral-700 dark:text-neutral-100">
            <!-- icon -->
            <div class="w-8 h-8 flex qjdklap gafhbnc phfjsdf bg-gradient-to-tr from-orange-600 to-orange-400 text-orange-50">M</div>
            <!-- text -->
            <span class="ms-1.5 sidebar-small-text uppercase">Minimax</span>
          </h2>
        </a>
      </div>

      <!--navigation-->
      <div class="mb-4">
        <nav class="relative flex flex-wrap gafhbnc agjstda">
          <ul id="side-menu" class="w-full float-none flex djksgia">
            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">Home</a>
            </li>
            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">About</a>
            </li>

            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-orange-600 focus:text-orange-600">Support</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- copyright -->
    <div class="mt-5 text-center">
      <p>Copyright <a href="#">Minimax</a> - All right reserved</p>
    </div>
  </nav>
</div>

<!-- left pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="flex justify-start -space-x-px">
    <li>
      <a :class="{ 'active': item === '1' }" @click="item = '1'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 p-3 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 rounded-l dark:bg-neutral-800 dark:border-neutral-700" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'active': item === '2' }" @click="item = '2'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">1</a></li>
    <li><a :class="{ 'active': item === '3' }" @click="item = '3'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">2</a></li>
    <li><a :class="{ 'active': item === '4' }" @click="item = '4'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">3</a></li>
    <li>
      <a :class="{ 'active': item === '5' }" @click="item = '5'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

<!-- center pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="flex qjdklap -space-x-px">
    <li>
      <a :class="{ 'active': item === '1' }" @click="item = '1'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700 rounded-l" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'active': item === '2' }" @click="item = '2'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">1</a></li>
    <li><a :class="{ 'active': item === '3' }" @click="item = '3'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">2</a></li>
    <li><a :class="{ 'active': item === '4' }" @click="item = '4'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">3</a></li>
    <li>
      <a :class="{ 'active': item === '5' }" @click="item = '5'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

<!-- right pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="flex justify-end -space-x-px">
    <li>
      <a :class="{ 'active': item === '1' }" @click="item = '1'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700 rounded-l" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'active': item === '2' }" @click="item = '2'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">1</a></li>
    <li><a :class="{ 'active': item === '3' }" @click="item = '3'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">2</a></li>
    <li><a :class="{ 'active': item === '4' }" @click="item = '4'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700" href="#">3</a></li>
    <li>
      <a :class="{ 'active': item === '5' }" @click="item = '5'" class="block relative [&.active]:bg-orange-500/50 [&.active]:text-orange-700 dark:[&.active]:text-orange-500 py-3 px-4 bg-white border border-neutral-200 hover:text-orange-700 dark:hover:text-orange-500 hover:bg-orange-500/50 dark:hover:bg-orange-500/50 dark:bg-neutral-800 dark:border-neutral-700 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

<!-- Popovers top -->
<div x-data="{ open: false }" class="relative inline-block mb-3">
  <button @click="open = true" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
    Popovers on top
  </button>
  <!-- Popovers area -->
  <div class="oousjgk top-auto bottom-full mb-3" x-show="open" @click.away="open = false">
    <div class="z-40 w-32 p-3 -mb-1 text-sm leading-tight text-neutral-700 bg-white border border-neutral-200 phfjsdf kjjsdlo text-center">
      Popovers on top
    </div>
    <div class="oousjgk transform -rotate-45 p-1 w-1 bg-white border-l border-b border-neutral-200 bottom-0 -mb-2 ms-6"></div>
  </div>
</div>

<!-- Popovers bottom -->
<div x-data="{ open: false }" class="relative inline-block mb-3">
  <button @click="open = true" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
    Popovers on bottom
  </button>
  <!-- Popovers area -->
  <div class="oousjgk top-full bottom-auto mt-3" x-show="open" @click.away="open = false">
    <div class="z-40 w-32 p-3 -mt-1 text-sm leading-tight text-neutral-700 bg-white phfjsdf border border-neutral-200 kjjsdlo text-center">
      Popovers on bottom
    </div>
    <div class="oousjgk transform -rotate-45 p-1 w-1 bg-white border-r border-t border-neutral-200 top-0 -mt-2 ms-6"></div>
  </div>
</div>

<!-- progress -->
<div class="flex h-4 zvgdfhg bg-orange-200/50 rounded mb-4">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-orange-500" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<!-- progress -->
<div class="flex h-4 zvgdfhg bg-red-200/50 rounded mb-4">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-red-500" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
</div>

<!-- progress -->
<div class="flex h-4 zvgdfhg bg-yellow-200/50 rounded mb-4">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-yellow-500" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>

<!-- progress -->
<div class="flex h-4 zvgdfhg bg-lime-200/50 rounded mb-4">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-lime-500" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>

<!-- progress small -->
<div class="flex h-2 zvgdfhg bg-orange-200/50 rounded">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-orange-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:61%">
    <span class="sr-only">61%</span>
  </div>
</div>

<!-- progress small -->
<div class="flex h-2 zvgdfhg bg-red-200/50 rounded">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-red-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:61%">
    <span class="sr-only">61%</span>
  </div>
</div>

<!-- progress small -->
<div class="flex h-2 zvgdfhg bg-yellow-200/50 rounded">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-yellow-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:61%">
    <span class="sr-only">61%</span>
  </div>
</div>

<!-- progress small -->
<div class="flex h-2 zvgdfhg bg-lime-200/50 rounded">
  <div class="flex djksgia qjdklap zvgdfhg text-white text-center whitespace-nowrap bg-lime-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:61%">
    <span class="sr-only">61%</span>
  </div>
</div>

Custom scrollbar

Hidden scrollbar

<!-- Custom scrollbar -->
<div class="bg-neutral-100 p-8 mb-6 border border-neutral-200 dark:bg-neutral-900 dark:bg-opacity-20 dark:border-neutral-800">
  <div class="h-36 overflow-y-auto scrollbars show mb-6">
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
    The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>

    <p>The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum</p>
  </div>
</div>

<!-- Hidden scrollbar -->
<div class="bg-neutral-100 p-8 mb-6 border border-neutral-200 dark:bg-neutral-900 dark:bg-opacity-20 dark:border-neutral-800">
  <div class="h-36 overflow-y-auto scrollbars mb-6">
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
    The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>

    <p>The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum</p>
  </div>
</div>

<!-- spinner -->
<div class="inline-block me-4">
  <svg class="animate-spin h-5 w-5 text-orange-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>

<div class="inline-block me-4">
  <svg class="animate-spin h-5 w-5 text-red-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>

<div class="inline-block me-4">
  <svg class="animate-spin h-5 w-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>

<div class="inline-block me-4">
  <svg class="animate-spin h-5 w-5 text-lime-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>

<div class="inline-block me-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping oousjgk inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-orange-500"></span>
  </span>
</div>

<div class="inline-block me-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping oousjgk inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-red-500"></span>
  </span>
</div>

<div class="inline-block me-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping oousjgk inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-yellow-500"></span>
  </span>
</div>

<div class="inline-block me-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping oousjgk inline-flex h-full w-full rounded-full bg-lime-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-lime-500"></span>
  </span>
</div>

Basic tabs

Vertical tabs

<!-- Basic tabs -->
<div x-data="{ tabs: 1 }" class="mb-8">
  <ul class="flex border-b dark:border-neutral-700">
    <li @click="tabs = 1" :class="{ '-mb-px': tabs === 1 }" class="me-1">
      <a :class="{ '-mb-px border-l border-t border-r rounded-t text-orange-500 dark:border-neutral-700': tabs === 1 }" class="bg-white dark:bg-neutral-800 dark:border-neutral-700 inline-block py-2 px-4 hover:text-orange-500 font-semibold" href="javascript:;">Home</a>
    </li>
    <li @click="tabs = 2" :class="{ '-mb-px': tabs === 2 }" class="me-1">
      <a :class="{ 'border-l border-t border-r rounded-t text-orange-500': tabs === 2 }" class="bg-white dark:bg-neutral-800 dark:border-neutral-700 inline-block py-2 px-4 hover:text-orange-500 font-semibold" href="javascript:;">Profile</a>
    </li>
    <li @click="tabs = 3" :class="{ '-mb-px': tabs === 3 }" class="me-1">
      <a :class="{ 'border-l border-t border-r rounded-t text-orange-500': tabs === 3 }" class="bg-white dark:bg-neutral-800 dark:border-neutral-700 inline-block py-2 px-4 hover:text-orange-500 font-semibold" href="javascript:;">Contact</a>
    </li>
  </ul>
  <div class="w-full pt-4">
    <div x-show="tabs === 1">
      <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
    </div>
    <div x-show="tabs === 2">
      <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
    </div>
    <div x-show="tabs === 3">
      <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
    </div>
  </div>
</div>

<!-- vertical tabs -->
<div x-data="{ tabs: 1 }" class="flex agjstda -mx-4">
  <ul class="max-w-full px-4">
    <li @click="tabs = 1" :class="{ '-me-px': tabs === 1 }" class="me-1">
      <a :class="{ '!bg-orange-500 text-neutral-100 rounded': tabs === 1 }" class="bg-white dark:bg-neutral-800 rounded text-center block py-2 px-4 font-semibold mb-4" href="javascript:;">Home</a>
    </li>
    <li @click="tabs = 2" :class="{ '-me-px': tabs === 2 }" class="me-1">
      <a :class="{ '!bg-orange-500 text-neutral-100 rounded': tabs === 2 }" class="bg-white dark:bg-neutral-800 rounded text-center block py-2 px-4 font-semibold mb-4" href="javascript:;">Profile</a>
    </li>
    <li @click="tabs = 3" :class="{ '-me-px': tabs === 3 }" class="me-1">
      <a :class="{ '!bg-orange-500 text-neutral-100 rounded': tabs === 3 }" class="bg-white dark:bg-neutral-800 rounded text-center block py-2 px-4 font-semibold mb-4" href="javascript:;">Contact</a>
    </li>
  </ul>
  <div class="max-w-full px-4">
    <div x-show="tabs === 1">
      <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
    </div>
    <div x-show="tabs === 2">
      <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
    </div>
    <div x-show="tabs === 3">
      <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
    </div>
  </div>
</div>

<!-- Tooltip top -->
<div x-data="{ tooltips: false }" class="relative inline-block mb-3">
  <button x-on:mouseover="tooltips = true" x-on:mouseleave="tooltips = false" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
    Tooltip on top
  </button>
  <!-- tooltip area -->
  <div class="oousjgk top-auto bottom-full mb-3" x-cloak x-show.transition.origin.top="tooltips">
    <div class="z-40 w-32 p-3 -mb-1 text-sm leading-tight text-white bg-black phfjsdf kjjsdlo text-center">
      Tooltip on top
    </div>
    <div class="oousjgk transform -rotate-45 p-1 w-1 bg-black bottom-0 -mb-2 ms-6"></div>
  </div>
</div>

<!-- Tooltip bottom -->
<div x-data="{ tooltips: false }" class="relative inline-block mb-3">
  <button x-on:mouseover="tooltips = true" x-on:mouseleave="tooltips = false" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
    Tooltip on bottom
  </button>
  <!-- tooltip area -->
  <div class="oousjgk top-full bottom-auto mt-3" x-cloak x-show.transition.origin.top="tooltips">
    <div class="z-40 w-32 p-3 -mt-1 text-sm leading-tight text-white bg-black phfjsdf kjjsdlo text-center">
      Tooltip on bottom
    </div>
    <div class="oousjgk transform -rotate-45 p-1 w-1 bg-black top-0 -mt-2 ms-6"></div>
  </div>
</div>

<!-- tooltip with microtip -->
<button aria-label="Tooltip with microtip" data-microtip-position="top" role="tooltip" type="button" class="py-2 px-4 inline-flex gafhbnc qjdklap gap-2 rounded leading-5 text-neutral-100 bg-orange-500 border border-orange-500 hover:text-white hover:bg-orange-600 hover:ring-0 hover:border-orange-600 focus:bg-orange-600 focus:border-orange-600 focus:outline-none focus:ring-0">
  Tooltip with microtip
</button>