Minimax | Minimalist Tailwind Dashboard Admin

Accordion

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.


<!-- Accordion -->
<div id="Accordion" x-data="{selected:0}">
  <!-- list -->
  <div class="relative flex flex-wrap ioajsklehsnm shadow-sm shadow-neutral-500/10 mb-4 bg-white dark:bg-neutral-800">
    <div class="mb-0 bg-neutral-50 dark:bg-neutral-900/20 dark:border-neutral-800 py-2 uajskeiolksb" id="HeadingOnee">
      <button class="py-3 px-0 w-full rounded-sm leading-5 font-medium flex vlaoethsnkma focus:outline-hidden focus:ring-0"  @click="selected !== 0 ? selected = 0 : selected = null">
        Ask question?
        <i class="transform transition duration-500 bi bi-chevron-down" :class="{ '-rotate-180': selected == 0 }"></i>
      </button>
    </div>
    <div id="CollapseOnee" x-show="selected == 0" class="flex-1 p-6">
      <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
  </div>

  <!-- list -->
  <div class="relative flex flex-wrap ioajsklehsnm shadow-sm shadow-neutral-500/10 mb-4 bg-white dark:bg-neutral-800">
    <div class="mb-0 bg-neutral-50 dark:bg-neutral-900/20 dark:border-neutral-800 py-2 uajskeiolksb" id="HeadingTwoe">
      <button class="py-3 px-0 w-full rounded-sm leading-5 font-medium flex vlaoethsnkma focus:outline-hidden focus:ring-0" @click="selected !== 1 ? selected = 1 : selected = null">
        Second Question?
        <i class="transform transition duration-500 bi bi-chevron-down" :class="{ '-rotate-180': selected == 1 }"></i>
      </button>
    </div>
    <div id="CollapseTwoe" x-show="selected == 1" class="flex-1 p-6">
      <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
  </div>
</div>

Alerts

Basic Alert

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a success alert—check it out!

This is a info alert—check it out!

Dismiss Alert

You should check in on some of those fields below.

Alert with Link

Dismiss Warning! You should check in on some of those fields below.

Alert with action button

Warning

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.

Take this action!


<!-- Basic Alert -->
<div class="flex layhetgsjdcb relative bg-red-50 dark:bg-red-500/20 text-red-700 dark:text-red-400 py-3 dkslaoeyhnmj rounded-sm 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 layhetgsjdcb relative bg-yellow-50 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 py-3 dkslaoeyhnmj rounded-sm 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 layhetgsjdcb relative bg-lime-50 dark:bg-lime-500/20 text-lime-700 dark:text-lime-400 py-3 dkslaoeyhnmj rounded-sm 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 layhetgsjdcb relative bg-indigo-50 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-lime-50 dark:bg-lime-500/20 text-lime-700 dark:text-lime-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
  <div class="flex layhetgsjdcb">
    <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 vlaoethsnkma layhetgsjdcb relative bg-yellow-50 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-red-50 dark:bg-red-500/20 text-red-700 dark:text-red-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
  <div>
    <div class="flex klsuaonrmcha vlaoethsnkma">
      <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 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Take this action!</a>
  </div>
</div>

Avatar

Avatar rounded

Avatar group


<!-- Avatar rounded-sm -->
<img class="inline-block boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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 boalstehwqbj shadow-sm 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>

Badge

Heading with badge

Example heading New

Badge default

Primary Danger Warning Success Info Light Dark

Badge Soft

Primary Success Warning Danger Info


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

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

<!-- Badge Soft -->
<span class="inline-flex yhansklopals 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 yhansklopals 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 yhansklopals 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 yhansklopals 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 yhansklopals 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>

Breadcrumb


<nav aria-label="breadcrumb" class="mb-4">
  <ol class="flex flex-wrap cklsihrbanmq 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>

Buttons

Button

Outline Button

Gradient Button

Animation & Disabled Button

Button Size

Button Group

Button group vertical


<!-- Button -->
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Warning</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Info</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Light</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Dark</button>

<!-- Outline Button -->
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Warning</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Info</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Light</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Dark</button>

<!-- Gradient Button -->
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-orange-500 border border-orange-500 bg-linear-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-hidden focus:ring-0"><i class="bi bi-chat"></i>Primary</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-lime-500 border border-lime-500 bg-linear-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-hidden focus:ring-0"><i class="bi bi-check"></i>Success</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-red-500 border border-red-500 bg-linear-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-hidden focus:ring-0"><i class="bi bi-info-circle"></i>Danger</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-yellow-500 border border-yellow-500 bg-linear-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-hidden focus:ring-0">Warning</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-orange-500 border border-orange-300 bg-linear-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-hidden focus:ring-0">Info</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-800 bg-neutral-100 border border-neutral-100 bg-linear-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-hidden focus:ring-0">Light</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm leading-5 text-neutral-100 bg-neutral-800 border border-neutral-800 bg-linear-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-hidden focus:ring-0">Dark</button>

<!-- button animate -->
<div class="relative inline-flex border-rotate p-0.5 rounded-sm mklausjenrhtm">
  <button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-linear-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-sm 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 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Small</button>
<button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Normal</button>
<button type="button" class="text-2xl py-4 maksueyropls inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">Large</button>

<!-- button group -->
<div class="inline-flex me-3" role="group">
  <button type="button" class="rounded-l py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -me-0.5">Left</button>
  <button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden 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 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -me-0.5">Left</button>
  <button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -ms-0.5">Right</button>
</div>

<!-- button group vertical -->
<div class="flex ioajsklehsnm float-left w-32 me-4 mb-4" role="group">
  <button type="button" class="rounded-t-sm py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0">Middle</button>
  <button type="button" class="rounded-b-sm py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -mt-0.5">Right</button>
</div><div class="clear-both"></div>

<!-- outline button group vertical -->
<div class="flex ioajsklehsnm float-left w-32 ms-8" role="group">
  <button type="button" class="rounded-t-sm py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0">Middle</button>
  <button type="button" class="rounded-b-sm py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals 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-hidden focus:ring-0 -mt-0.5">Right</button>
</div>

Card

Default Card

Default Card Bordered

New web design layout trends in 2021

04 May 2020

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.


<!-- card -->
<div class="p-4 bg-white dark:bg-neutral-800 rounded-lg shadow-lg shadow-orange-500/[.05] dark:shadow-orange-500/[0.15]">Default Card</div>

<!-- card bordered -->
<div class="p-4 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg shadow-orange-500/[.05] dark:shadow-orange-500/[0.15]">Default Card Bordered</div>

<!-- card -->
<div class="flex ioajsklehsnm bg-white dark:bg-neutral-800 rounded-lg shadow-sm shadow-orange-500/[.05] dark:shadow-orange-500/[0.15] mb-6 rounded-sm mklausjenrhtm w-72">
  <div class="relative mklausjenrhtm">
    <a href="#">
      <div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
      <img class="max-w-full h-auto" src="img/product1.jpeg" alt="alt title">
    </a>
  </div>
  <div class="p-6 flex-1">
    <div class="mb-2">
      <h3 class="text-lg leading-normal mb-3 font-bold text-neutral-800 dark:text-neutral-300"><a href="#" class="hover:text-orange-700">New web design layout trends in 2021</a></h3>
      <div class="text-neutral-500">
        <svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg><span>04 May 2020</span>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
  </div>
</div>

Carousel (Required plugins)

Slide 01
Slide 02
Slide 03


<!-- 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

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.


<!-- Collapse -->
<div x-data="{open:false}">
  <p class="flex">
    <a x-on:click.prevent="open=!open" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0">
    Link with href
    </a>
    <button  @click="open=!open" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2 rounded-sm 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-hidden focus:ring-0" type="button">
    Button with data-target
    </button>
  </p>
  <div x-show="open" class="border uajskeiolksb 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>

Drag Drop (Required plugins)

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 klsuaonrmcha">
  <li class="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 uajskeiolksb 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 uajskeiolksb 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 uajskeiolksb py-2 bg-white dark:bg-neutral-800">
        <p>Task 3</p>
      </li>
    </ul>
  </li>
  <li class="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 uajskeiolksb 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 uajskeiolksb 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 uajskeiolksb py-2 bg-white dark:bg-neutral-800">
        <p>Task 6</p>
      </li>
    </ul>
  </li>
  <li class="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 uajskeiolksb 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 uajskeiolksb 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 uajskeiolksb py-2 bg-white dark:bg-neutral-800">
        <p>Task 9</p>
      </li>
    </ul>
  </li>
  <li class="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 uajskeiolksb 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 uajskeiolksb py-2 bg-white dark:bg-neutral-800">
        <p>Task 11</p>
      </li>
    </ul>
  </li>
</ul>

Dropdowns