Dropdown

            
<!-- dropdown -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown1" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
    Dropdown
    <i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
  </button>

  <div id="dropdown1" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible py-3 px-4 absolute z-30 transition duration-600 ease-in-out left-0 w-72 top-[52px] min-w-[150px] inline-flex flex-col rounded overflow-hidden border bg-primary-100 dark:bg-primary-900 border-primary-200 dark:border-primary-950 shadow-outset-fixed">
    <div>
      <p>This is the content of the dropdown.</p>
    </div>
  </div>
</div>

<!-- dropdown menu -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown2" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
    Dropdown
    <i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
  </button>

  <ul id="dropdown2" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute left-0 top-full z-30 w-full min-w-60 p-3 flex flex-col gap-3 border bg-primary-100 dark:bg-primary-900 border-primary-200 dark:border-primary-950 shadow-outset-fixed rounded overflow-auto mt-2">
    <li class="py-3 px-4 rounded border border-primary-200 dark:border-primary-950 shadow-inset">Dropdown item</li>
    <li class="py-3 px-4 rounded border border-primary-200 dark:border-primary-950 shadow-inset">Dropdown item</li>
    <li class="py-3 px-4 rounded border border-primary-200 dark:border-primary-950 shadow-inset">Dropdown item</li>
  </ul>
</div>