Basic Alert

Dismiss Alert

Alert with Link

Alert with action button

<!-- Basic Alert -->
<div class="flex items-center relative bg-red-50 text-red-700 py-3 px-6 rounded mb-4">
  <i class='bx bx-info-circle mr-2'></i>
  <p>This is a danger alert—check it out!</p>
</div>
<div class="flex items-center relative bg-yellow-50 text-yellow-700 py-3 px-6 rounded mb-4">
  <i class='bx bx-info-circle mr-2'></i>
  <p>This is a warning alert—check it out!</p>
</div>
<div class="flex items-center relative bg-green-50 text-green-700 py-3 px-6 rounded mb-4">
  <i class='bx bx-info-circle mr-2'></i>
  <p>This is a success alert—check it out!</p>
</div>
<div class="flex items-center relative bg-cyan-50 text-slate-700 py-3 px-6 rounded mb-4">
  <i class='bx bx-info-circle mr-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 justify-between items-center relative bg-green-50 text-green-700 py-3 px-6 rounded mb-4">
  <div class="flex items-center">
    <i class='bx bx-info-circle mr-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 justify-between items-center relative bg-yellow-50 text-yellow-700 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 justify-between items-center relative bg-red-50 text-red-700 py-3 px-6 rounded mb-4">
  <div>
    <div class="flex flex-row justify-between">
      <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 mr-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-block text-center mb-3 rounded leading-5 text-slate-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-xl w-8 h-8 max-w-full bg-slate-300 dark:bg-slate-800" src="src/img/avatar/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-slate-300 dark:bg-slate-800" src="src/img/avatar/avatar.png" alt="Image Description">
<img class="inline-block rounded-full shadow-xl w-16 h-16 max-w-full bg-slate-300 dark:bg-slate-800" src="src/img/avatar/avatar.png" alt="Image Description">

<!-- Avatar group -->
<div class="relative">
  <a href="#">
    <img class="inline-block rounded-full shadow-xl w-12 h-12 max-w-full bg-slate-300 dark:bg-slate-800 -mr-4 border-2 border-slate-200 dark:border-slate-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-xl w-12 h-12 max-w-full bg-slate-300 dark:bg-slate-800 -mr-4 border-2 border-slate-200 dark:border-slate-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-xl w-12 h-12 max-w-full bg-slate-300 dark:bg-slate-800 -mr-4 border-2 border-slate-200 dark:border-slate-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

Primary Danger Warning Success Info Light Dark

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

<!-- Badge -->
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-cyan-500 text-slate-100 font-light rounded">Primary</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-red-500 text-slate-100 font-light rounded">Danger</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-yellow-300 text-slate-900 font-light rounded">Warning</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-green-500 text-slate-100 font-light rounded">Success</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-cyan-300 text-slate-900 font-light rounded">Info</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-slate-100 text-slate-900 font-light rounded">Light</span>
<span class="inline-block leading-none text-center text-sm py-1 px-2 mr-2 bg-black text-slate-100 font-light rounded">Dark</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-slate-700 dark:text-slate-100 hover:text-cyan-500">
        Home
        <i class="bx bx-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li>
      <a href="#" class="text-slate-700 dark:text-slate-100 hover:text-cyan-500">
        Category
        <i class="bx bx-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li class="hidden md:block text-cyan-500" aria-current="page">Business</li>
  </ol>
</nav>

Button

Primary Success Danger Warning Info Light Dark

Outline Button

Primary Success Danger Warning Info Light Dark

Gradient Button

Primary Success Danger Warning Info Light Dark

Disabled Button

Disabled

Button Size

Small Normal Large

Button Group

Button group vertical

<!-- Button -->
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-chat mr-2"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-green-500 border border-green-500 hover:text-white hover:bg-green-600 hover:ring-0 hover:border-green-600 focus:bg-green-600 focus:border-green-600 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-check mr-2"></i>Success</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-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 mr-2"><i class="bx bx-info-circle mr-2"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-800 bg-yellow-300 border border-yellow-300 hover:text-slate-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 mr-2">Warning</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-800 bg-cyan-300 border border-cyan-300 hover:text-slate-900 hover:bg-cyan-500 hover:ring-0 hover:border-cyan-500 focus:bg-cyan-500 focus:border-cyan-500 focus:outline-none focus:ring-0 mr-2">Info</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-800 bg-slate-100 border border-slate-100 hover:text-slate-900 hover:bg-slate-200 hover:ring-0 hover:border-slate-200 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2">Light</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-slate-900 border border-slate-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 mr-2">Dark</button>

<!-- Outline Button -->
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-cyan-500 bg-transparent border border-cyan-500 hover:text-slate-100 hover:bg-cyan-500 hover:ring-0 hover:border-cyan-500 focus:text-slate-100 focus:bg-cyan-500 focus:border-cyan-500 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-chat mr-2"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-green-500 bg-transparent border border-green-500 hover:text-white hover:bg-green-500 hover:ring-0 hover:border-green-500 focus:text-white focus:bg-green-500 focus:border-green-500 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-check mr-2"></i>Success</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 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 mr-2"><i class="bx bx-info-circle mr-2"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-yellow-500 bg-transparent border border-yellow-500 hover:text-slate-100 hover:bg-yellow-500 hover:ring-0 hover:border-yellow-500 focus:text-slate-900 focus:bg-yellow-500 focus:border-yellow-500 focus:outline-none focus:ring-0 mr-2">Warning</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-cyan-300 bg-transparent border border-cyan-300 hover:text-slate-900 hover:bg-cyan-300 hover:ring-0 hover:border-cyan-300 focus:text-slate-900 focus:bg-cyan-300 focus:border-cyan-300 focus:outline-none focus:ring-0 mr-2">Info</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-700 bg-transparent border border-slate-100 hover:text-slate-900 hover:bg-slate-200 hover:ring-0 hover:border-slate-200 focus:text-slate-900 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2">Light</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-900 bg-transparent border border-slate-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 mr-2">Dark</button>

<!-- Gradient Button -->
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 bg-gradient-to-b from-cyan-400 to-cyan-600 hover:bg-cyan-600 hover:from-cyan-500 hover:to-cyan-600 focus:from-cyan-400 focus:to-cyan-600 hover:text-white hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-chat mr-2"></i>Primary</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-green-500 border border-green-500 bg-gradient-to-b from-green-400 to-green-600 hover:bg-green-600 hover:from-green-500 hover:to-green-600 focus:from-green-500 focus:to-green-600 hover:text-white hover:ring-0 hover:border-green-600 focus:bg-green-600 focus:border-green-600 focus:outline-none focus:ring-0 mr-2"><i class="bx bx-check mr-2"></i>Success</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-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 mr-2"><i class="bx bx-info-circle mr-2"></i>Danger</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-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 mr-2">Warning</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-300 bg-gradient-to-b from-cyan-300 to-cyan-500 hover:bg-cyan-600 hover:from-cyan-300 hover:to-cyan-500 focus:from-cyan-300 focus:to-cyan-500 hover:text-white hover:ring-0 hover:border-cyan-500 focus:bg-cyan-400 focus:border-cyan-400 focus:outline-none focus:ring-0 mr-2">Info</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-800 bg-slate-100 border border-slate-100 bg-gradient-to-b from-slate-100 to-slate-300 hover:bg-slate-200 hover:from-slate-300 hover:to-slate-100 focus:from-slate-300 focus:to-slate-100 hover:text-slate-900 hover:ring-0 hover:border-slate-200 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2">Light</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-slate-800 border border-slate-800 bg-gradient-to-b from-slate-700 to-slate-900 hover:bg-slate-800 hover:from-slate-900 hover:to-slate-700 focus:from-slate-900 focus:to-slate-700 hover:text-white hover:ring-0 hover:border-slate-900 focus:bg-slate-900 focus:border-slate-900 focus:outline-none focus:ring-0 mr-2">Dark</button>

<!-- Disabled Button -->
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 mr-2 cursor-not-allowed opacity-70" disabled>Disabled</button>

<!-- Button Size -->
<button type="button" class="text-sm py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 mr-2">Small</button>
<button type="button" class="py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 mr-2">Normal</button>
<button type="button" class="text-2xl py-4 px-8 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Large</button>

<!-- button group -->
<div class="inline-flex mr-3" role="group">
  <button type="button" class="rounded-l py-2 px-4 inline-block text-center mb-3 leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -mr-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-block text-center mb-3 leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 px-4 inline-block text-center mb-3 leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -ml-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-block text-center mb-3 leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -mr-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-block text-center mb-3 leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-r py-2 px-4 inline-block text-center mb-3 leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -ml-0.5">Right</button>
</div>

<!-- button group vertical -->
<div class="flex flex-col float-left w-32 mr-4 mb-4" role="group">
  <button type="button" class="rounded-t py-2 px-4 inline-block text-center leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-block text-center leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-b py-2 px-4 inline-block text-center leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-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 flex-col float-left w-32 ml-8" role="group">
  <button type="button" class="rounded-t py-2 px-4 inline-block text-center leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
  <button type="button" class="py-2 px-4 inline-block text-center leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Middle</button>
  <button type="button" class="rounded-b py-2 px-4 inline-block text-center leading-normal text-cyan-500 bg-white dark:bg-slate-800 border border-cyan-500 hover:text-slate-100 hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:text-slate-100 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
</div>

<!-- card -->
<div class="flex flex-col bg-white dark:bg-slate-800 mb-12 rounded overflow-hidden shadow w-72">
  <div class="relative overflow-hidden">
    <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-slate-800 dark:text-slate-300"><a href="#" class="hover:text-cyan-700">New web design layout trends in 2021</a></h3>
      <div class="text-slate-500">
        <svg class="bi bi-calendar mr-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>

<!-- 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-slate-50 dark:bg-slate-800 text-center">Slide 01</li>
      <li class="splide__slide py-32 px-12 bg-slate-50 dark:bg-slate-800 text-center">Slide 02</li>
      <li class="splide__slide py-32 px-12 bg-slate-50 dark:bg-slate-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0 mr-2">
    Link with href
    </a>
    <button  @click="open=!open" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-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-slate-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 flex-row">
  <li class="flex-shrink w-1/2 md:w-1/4 to-do-column">
    <div class="p-4 bg-yellow-50 mb-2">
      <h4>To Do</h4>
    </div>
    <ul class="px-1 pb-1 bg-slate-50 dark:bg-black" id="to-do">
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 1</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 2</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-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-50 mb-2">
      <h4>Doing</h4>
    </div>
    <ul class="px-1 pb-1 bg-slate-50 dark:bg-black" id="doing">
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 4</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 5</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-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-green-50 mb-2">
      <h4>Done</h4>
    </div>
    <ul class="px-1 pb-1 bg-slate-50 dark:bg-black" id="done">
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 7</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 8</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-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-50 mb-2">
      <h4>Trash</h4>
    </div>
    <ul class="px-1 pb-1 bg-slate-50 dark:bg-black" id="trash">
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 10</p>
      </li>
      <li class="drop-item cursor-move border border-slate-200 dark:border-slate-700 mb-1 px-4 py-2 bg-white dark:bg-slate-800">
        <p>Task 11</p>
      </li>
    </ul>
  </li>
</ul>

<!-- default dropdown -->
<div x-data="{ show: false }" class="relative mr-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-slate-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="absolute bg-white z-10 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" style="min-width:12rem">
      <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Action</a>
      <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Another action</a>
      <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Something else here</a>
      <hr class="border-t border-slate-200 dark:border-slate-700 my-0">
      <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Separated link</a>
  </div>
</div>

<!-- up dropdown -->
<div x-data="{ show: false }" class="relative mr-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-slate-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="absolute left-0 bottom-full top-auto bg-white z-10 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Something else here</a>
    <hr class="border-t border-slate-200 dark:border-slate-700 my-0">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Separated link</a>
  </div>
</div>

<!-- right dropdown -->
<div x-data="{ show: false }" class="relative mr-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0">
    <span class="pr-2">Dropdown</span>
    <svg class="fill-current text-slate-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="absolute top-0 left-full right-auto bg-white z-10 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Something else here</a>
    <hr class="border-t border-slate-200 dark:border-slate-700 my-0">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Separated link</a>
  </div>
</div>

<!-- right dropdown -->
<div x-data="{ show: false }" class="relative mr-4">
  <button @click="show = ! show" type="button" class="flex py-2 px-4 text-center rounded-md leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0">
    <svg class="fill-current text-slate-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="absolute top-0 right-full left-auto bg-white z-10 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Something else here</a>
    <hr class="border-t border-slate-200 dark:border-slate-700 my-0">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Separated link</a>
  </div>
</div>

<!-- Split dropdown -->
<div x-data="{ show: false }" class="relative inline-flex mr-2" role="group">
  <button type="button" class="flex py-2 px-4 text-center rounded-l leading-normal text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0 -mr-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-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-700 hover:ring-0 hover:border-cyan-700 focus:bg-cyan-700 focus:border-cyan-700 focus:outline-none focus:ring-0 -ml-0.5">
    <svg class="fill-current text-slate-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="absolute top-full bottom-auto left-0 bg-white z-10 rounded border border-slate-200 dark:bg-slate-800 dark:border-slate-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Something else here</a>
    <hr class="border-t border-slate-200 dark:border-slate-700 my-0">
    <a class="block px-3 py-2 hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-900 dark:focus:bg-slate-900" href="#">Separated link</a>
  </div>
</div>

2 Layouts option

There are 2 layout options that are ready to use.

Responsive Grid

You can edit responsive grid column 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>

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

<!-- Row and 3 Grid column-->
<div class="flex flex-wrap flex-row mb-4">
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 border border-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-800">
     <div class="p-5 h-20 w-full">.w-1/3</div>
  </div>
</div>

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

<!-- Row and 5 Grid column-->
<div class="flex flex-wrap flex-row mb-4">
  <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 xl:w-1/5 border border-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-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-slate-200 dark:border-slate-700">
  <li class="group">
    <a class="border border-slate-200 dark:border-slate-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-cyan-500" href="#">
      An item
      <span class="text-sm py-1 px-2 bg-cyan-500 text-slate-100 rounded group-hover:text-cyan-500 group-hover:bg-slate-100 dark:group-hover:bg-slate-700 dark:group-hover:text-white">14</span>
    </a>
  </li>
  <li class="group">
    <a class="border border-slate-200 dark:border-slate-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-cyan-500" href="#">
      A second item
      <span class="text-sm py-1 px-2 bg-cyan-500 text-slate-100 rounded group-hover:text-cyan-500 group-hover:bg-slate-100 dark:group-hover:bg-slate-700 dark:group-hover:text-white">14</span>
    </a>
  </li>
  <li class="group">
    <a class="border border-slate-200 dark:border-slate-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-cyan-500" href="#">
      A third item
      <span class="text-sm py-1 px-2 bg-cyan-500 text-slate-100 rounded group-hover:text-cyan-500 group-hover:bg-slate-100 dark:group-hover:bg-slate-700 dark:group-hover:text-white">14</span>
    </a>
  </li>
  <li class="group">
    <a class="border border-slate-200 dark:border-slate-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-cyan-500" href="#">
      A fourth item
      <span class="text-sm py-1 px-2 bg-cyan-500 text-slate-100 rounded group-hover:text-cyan-500 group-hover:bg-slate-100 dark:group-hover:bg-slate-700 dark:group-hover:text-white">14</span>
    </a>
  </li>
  <li class="group">
    <a class="border border-slate-200 dark:border-slate-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-cyan-500" href="#">
      And a fifth one
      <span class="text-sm py-1 px-2 bg-cyan-500 text-slate-100 rounded group-hover:text-cyan-500 group-hover:bg-slate-100 dark:group-hover:bg-slate-700 dark:group-hover:text-white">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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-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 fixed 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 shadow-lg border flex flex-col overflow-hidden dark:bg-slate-800 dark:border-slate-700">
        <button @click="open = false" class="fill-current h-6 w-6 absolute right-0 top-0 m-6 font-3xl font-bold">×</button>
        <!-- modal title -->
        <div class="px-6 py-3 text-xl border-b dark:border-slate-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-slate-700 flex justify-end">
          <button @click="open = false" type="button" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-800 bg-slate-100 border border-slate-100 hover:text-slate-900 hover:bg-slate-200 hover:ring-0 hover:border-slate-200 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2">Close</Button>
          <button type="button" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Saves Changes</Button>
        </div>
      </div>
    </div>
    <div class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-black opacity-50"></div>
  </div>
</div>

<!-- Navbar -->
<nav x-data="{ open: false }" class="flex flex-nowrap lg:flex-start items-center z-20 top-0 left-0 right-0 bg-white dark:bg-slate-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 flex-row justify-between py-3 lg:hidden">
      <!-- logo -->
      <a class="flex items-center py-2 mr-4 text-xl" href="#">
        <h2 class="flex flex-row items-center text-xl text-slate-100 font-semibold">
          <img class="w-5 h-5 mr-1.5" alt="Logo" src="src/img/logo/logo11.png">
          Tailboard
        </h2>
      </a>
      <!-- navbar toggler -->
      <div class="right-0 flex items-center">
        <!-- Mobile menu button-->
        <button id="navbartoggle" type="button" class="inline-flex items-center justify-center text-slate-800 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-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 fixed 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="fixed bg-slate-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>

      <!-- Mobile navbar -->
      <nav id="mobile-nav" class="flex flex-col right-0 w-64 fixed top-0 py-4 bg-white dark:bg-slate-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" 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">
        <div class="mb-auto">
          <!--logo-->
          <div class="mh-18 text-center px-12 mb-8">
            <a href="#" class="flex relative">
              <h2 class="flex flex-row items-center text-xl text-slate-100 font-semibold">
                <img class="w-5 h-5 mr-1.5" alt="Logo" src="src/img/logo/logo11.png">
                Tailboard
              </h2>
            </a>
          </div>
          <!--navigation-->
          <div class="mb-4">
            <nav class="relative flex flex-wrap items-center justify-between">
              <ul id="side-menu" class="w-full float-none flex flex-col">
                <li class="relative">
                  <a href="#" class="block py-3 px-4 hover:text-cyan-700 focus:text-cyan-700">Home</a>
                </li>

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

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

    <!-- desktop menu -->
    <div class="hidden lg:flex lg:flex-row lg:flex-nowrap lg:items-center lg:justify-between lg:mt-0" id="desktp-menu">
      <!-- logo -->
      <a class="hidden lg:flex items-center py-2 mr-4 text-xl" href="#">
       <h2 class="flex flex-row items-center text-2xl text-slate-600 font-semibold">
          <img class="w-6 h-6 mr-1.5" alt="Logo" src="src/img/logo/logo11.png">
          Tailboard
        </h2>
      </a>

      <!-- menu -->
      <ul class="flex flex-col lg:mx-auto mt-2 lg:flex-row lg:mt-0">
        <li class="relative">
          <!-- active -->
          <a class="group block py-3 lg:py-7 px-6 text-cyan-500 hover:text-cyan-600 focus:text-cyan-600" href="#">
            <span class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-cyan-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-cyan-700 focus:text-cyan-700" href="#">
            <span class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-cyan-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-cyan-700 focus:text-cyan-700" href="#">
            <span class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-cyan-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-cyan-700 focus:text-cyan-700" href="#">
            <span class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-cyan-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0" target="_blank" rel="noopener" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" class="inline mr-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 justify-center absolute -top-2 -right-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 ml-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 justify-center absolute -top-2 -right-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 ml-8">
  <img class="h-10 w-10 rounded-full border border-slate-700 bg-slate-700" src="src/img/avatar/avatar.png" alt="avatar">
  <span title="online" class="flex justify-center absolute -bottom-0.5 right-1 text-center bg-green-500 border border-white w-3 h-3 rounded-full"></span>
</div>

<!-- Offcanvas button trigger -->
<button id="navbartoggle" type="button" class="inline-flex items-center justify-center text-slate-800 hover:text-slate-700 dark:text-slate-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="ml-3">Offcanvas</span>
</button>

<!-- Right Offcanvas -->
<div class="fixed 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="fixed bg-slate-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>

  <!-- Mobile navbar -->
  <nav id="mobile-nav" class="flex flex-col right-0 w-64 fixed top-0 py-4 bg-white dark:bg-slate-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" 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">
    <div class="mb-auto">
      <!--logo-->
      <div class="mh-18 text-center px-12 mb-8">
        <a href="#" class="flex relative">
          <h2 class="flex flex-row items-center text-xl text-slate-600 font-semibold">
            <img class="w-5 h-5 mr-1.5" alt="Logo" src="src/img/logo/logo11.png">
            Tailboard
          </h2>
        </a>
      </div>

      <!--navigation-->
      <div class="mb-4">
        <nav class="relative flex flex-wrap items-center justify-between">
          <ul id="side-menu" class="w-full float-none flex flex-col">
            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-cyan-700 focus:text-cyan-700">Home</a>
            </li>
            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-cyan-700 focus:text-cyan-700">About</a>
            </li>

            <li class="relative">
              <a href="#" class="block py-3 px-4 hover:text-cyan-700 focus:text-cyan-700">Support</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- copyright -->
    <div class="mt-5 text-center">
      <p>Copyright <a href="#">Tailboard</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-0">
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '1' }" @click="item = '1'" class="block relative p-3 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 rounded-l dark:bg-slate-800 dark:border-slate-700" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">1</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">2</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-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 justify-center space-x-0">
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700 rounded-l" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">1</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">2</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-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-0">
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700 rounded-l" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">1</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">2</a></li>
    <li><a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-cyan-500 dark:bg-cyan-500 text-slate-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-slate-200 hover:text-slate-100 hover:bg-cyan-500 -mr-0.5 dark:bg-slate-800 dark:border-slate-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
    Popovers on top
  </button>
  <!-- Popovers area -->
  <div class="absolute 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-slate-700 bg-white border border-slate-200 rounded-lg shadow-lg text-center">
      Popovers on top
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-white border-l border-b border-slate-200 bottom-0 -mb-2 ml-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
    Popovers on bottom
  </button>
  <!-- Popovers area -->
  <div class="absolute 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-slate-700 bg-white rounded-lg border border-slate-200 shadow-lg text-center">
      Popovers on bottom
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-white border-r border-t border-slate-200 top-0 -mt-2 ml-6"></div>
  </div>
</div>

<!-- pricing -->
<div class="flex flex-wrap flex-row mb-4">  
  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 lg:pt-6">
    <div class="w-full max-w-sm p-10 space-y-6 bg-slate-100 dark:bg-slate-800 rounded-lg shadow-lg shadow-cyan-500/10 dark:shadow-cyan-800/10 mx-auto mt-6 mb-6">
        <div class="flex-shrink-0 pb-6 space-y-2 border-b">
          <h2 class="text-xl font-normal">Trial</h2>
          <div class="flex-shrink-0">
            <span class="text-3xl font-medium tracking-tight">Free</span>
            <span class="text-slate-400">/month</span>
          </div>
          <p class="text-sm text-slate-500">Trial/check quality code</p>
        </div>

        <!-- Features -->
        <ul class="flex-1 space-y-4">
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">1 Developer</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Limited download</span>
          </li>
        
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Limited templates</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Personal use</span>
          </li>

          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 text-red-300 bi bi-x-circle-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Commercial use</span>
          </li>

          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 text-red-300 bi bi-x-circle-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Build Saas</span>
          </li>

          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 text-red-300 bi bi-x-circle-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Theme generator</span>
          </li>
        </ul>

        <!-- Button -->
        <div class="flex-shrink-0 pt-4">
          <button class="inline-flex items-center bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 justify-center w-full max-w-xs px-4 py-2 transition-colors border rounded-lg hover:ring-0 hover:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 text-cyan-500 hover:text-white hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/10 mb-2">Start free trial</button>
        </div>
      </div>
  </div>

  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3">
    <div class="w-full max-w-sm px-10 py-12 space-y-6 rounded-lg bg-cyan-100 dark:bg-cyan-900 shadow-lg shadow-cyan-500/10 relative mt-6 mb-6 mx-auto">
        <div class="flex-shrink-0 pb-6 space-y-2 border-b">
          <h2 class="text-xl font-normal">Freelancer</h2>
          <div class="flex-shrink-0">
            <span class="text-3xl font-medium tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-cyan-700 via-cyan-500 to-cyan-400">$5</span>
            <span class="text-slate-400">/month</span>
          </div>
          <p class="text-sm text-slate-500">Best for Freelancer/Personal</p>
        </div>

        <div class="absolute right-0 rounded-l top-0 py-1 px-4 text-sm bg-gradient-to-l from-cyan-400 to-cyan-700 text-white"><p class="font-medium">Most Popular</p></div>

        <!-- Features -->
        <ul class="flex-1 space-y-4">
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">1 Developer</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Unlimited download</span>
          </li>
        
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Unlimited project</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Web design service</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Update & support</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Build Saas</span>
          </li>

          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 text-red-300 bi bi-x-circle-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Theme generator</span>
          </li>
        </ul>

        <!-- Button -->
        <div class="flex-shrink-0 pt-4 text-center">
          <button class="inline-flex items-center justify-center w-full max-w-xs px-4 py-2 transition-colors border rounded-lg hover:ring-0 hover:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 bg-cyan-500 border-slate-200 dark:border-slate-700 text-white hover:bg-cyan-600 hover:shadow-lg hover:shadow-cyan-500/10 mb-2">Subcribe $59/year</button>
          <p class="text-sm text-neutral-400 text-center mt-2">Billed annually</p>
        </div>
      </div>
  </div>

  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 lg:pt-6">
    <div class="w-full max-w-sm p-10 space-y-6 bg-slate-100 dark:bg-slate-800 rounded-lg shadow-lg shadow-cyan-500/10 dark:shadow-cyan-800/10 mx-auto mt-6 mb-6">
        <div class="flex-shrink-0 pb-6 space-y-2 border-b">
          <h2 class="text-xl font-normal">Team</h2>
          <div class="flex-shrink-0">
            <span class="text-3xl font-medium tracking-tight">$10</span>
            <span class="text-slate-400">/month</span>
          </div>
          <p class="text-sm text-slate-500">Best for Team/small Agency</p>
        </div>

        <!-- Features -->
        <ul class="flex-1 space-y-4">
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Up to 7 Developer</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Unlimited download</span>
          </li>
        
          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Unlimited project</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Web design service</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Update & support</span>
          </li>

          <li class="flex items-start">
            <svg class="w-6 h-6 text-cyan-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Build Saas</span>
          </li>

          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 text-red-300 bi bi-x-circle-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
            </svg>
            <span class="ml-3 text-base font-medium">Theme generator</span>
          </li>
        </ul>

        <!-- Button -->
        <div class="flex-shrink-0 pt-4">
          <button class="inline-flex items-center bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 justify-center w-full max-w-xs px-4 py-2 transition-colors border rounded-lg hover:ring-0 hover:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 text-cyan-500 hover:text-white hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/10 mb-2">Subcribe $119/year</button>
          <p class="text-sm text-neutral-400 text-center mt-2">Billed annually</p>
        </div>
      </div>
  </div>
</div>

<!-- progress -->
<div class="flex h-4 overflow-hidden bg-cyan-100 rounded mb-4">
  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-cyan-400" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<!-- progress -->
<div class="flex h-4 overflow-hidden bg-red-100 rounded mb-4">
  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-red-700" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
</div>

<!-- progress -->
<div class="flex h-4 overflow-hidden bg-yellow-100 rounded mb-4">
  <div class="flex flex-col justify-center overflow-hidden text-slate-800 text-center whitespace-nowrap bg-yellow-300" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>

<!-- progress -->
<div class="flex h-4 overflow-hidden bg-green-100 rounded mb-4">
  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-green-500" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>

Custom scrollbar

Hidden scrollbar

<!-- Custom scrollbar -->
<div class="bg-slate-100 p-8 mb-6 border border-slate-200 dark:bg-slate-900 dark:bg-opacity-20 dark:border-slate-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-slate-100 p-8 mb-6 border border-slate-200 dark:bg-slate-900 dark:bg-opacity-20 dark:border-slate-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 mr-4">
  <svg class="animate-spin h-5 w-5 text-cyan-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 mr-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 mr-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 mr-4">
  <svg class="animate-spin h-5 w-5 text-green-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 mr-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-cyan-500"></span>
  </span>
</div>

<div class="inline-block mr-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping absolute 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 mr-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping absolute 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 mr-4">
  <span class="relative flex h-5 w-5">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-5 w-5 bg-green-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-slate-700">
    <li @click="tabs = 1" :class="{ '-mb-px': tabs === 1 }" class="mr-1">
      <a :class="{ '-mb-px border-l border-t border-r rounded-t text-cyan-500 dark:border-slate-700': tabs === 1 }" class="bg-white dark:bg-slate-800 dark:border-slate-700 inline-block py-2 px-4 hover:text-cyan-500 font-semibold" href="javascript:;">Home</a>
    </li>
    <li @click="tabs = 2" :class="{ '-mb-px': tabs === 2 }" class="mr-1">
      <a :class="{ 'border-l border-t border-r rounded-t text-cyan-500': tabs === 2 }" class="bg-white dark:bg-slate-800 dark:border-slate-700 inline-block py-2 px-4 hover:text-cyan-500 font-semibold" href="javascript:;">Profile</a>
    </li>
    <li @click="tabs = 3" :class="{ '-mb-px': tabs === 3 }" class="mr-1">
      <a :class="{ 'border-l border-t border-r rounded-t text-cyan-500': tabs === 3 }" class="bg-white dark:bg-slate-800 dark:border-slate-700 inline-block py-2 px-4 hover:text-cyan-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 justify-between -mx-4">
  <ul class="max-w-full px-4">
    <li @click="tabs = 1" :class="{ '-mr-px': tabs === 1 }" class="mr-1">
      <a :class="{ 'bg-cyan-500 text-slate-100 rounded': tabs === 1 }" class="bg-white dark:bg-slate-800 rounded text-center block py-2 px-4 font-semibold mb-4" href="javascript:;">Home</a>
    </li>
    <li @click="tabs = 2" :class="{ '-mr-px': tabs === 2 }" class="mr-1">
      <a :class="{ 'bg-cyan-500 text-slate-100 rounded': tabs === 2 }" class="bg-white dark:bg-slate-800 rounded text-center block py-2 px-4 font-semibold mb-4" href="javascript:;">Profile</a>
    </li>
    <li @click="tabs = 3" :class="{ '-mr-px': tabs === 3 }" class="mr-1">
      <a :class="{ 'bg-cyan-500 text-slate-100 rounded': tabs === 3 }" class="bg-white dark:bg-slate-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
    Tooltip on top
  </button>
  <!-- tooltip area -->
  <div class="absolute 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 rounded-lg shadow-lg text-center">
      Tooltip on top
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-black bottom-0 -mb-2 ml-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
    Tooltip on bottom
  </button>
  <!-- tooltip area -->
  <div class="absolute 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 rounded-lg shadow-lg text-center">
      Tooltip on bottom
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-black top-0 -mt-2 ml-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-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
  Tooltip with microtip
</button>