<!-- default dropdown -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
    <span>Dropdown Start</span>
    <span :class="{ '-rotate-180': dropdown == true }" class="transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4 show">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- default dropdown -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
    <span>Dropdown End</span>
    <span :class="{ '-rotate-180': dropdown == true }" class="transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out start-auto end-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4 show">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>
              
            

              
<!-- default dropdown -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown1" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black [&.show_.bi-chevron-down]:-rotate-180">
    <span class="pointer-events-none">Dropdown Start</span>
    <span class="pointer-events-none transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropdown1" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- default dropdown -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown2" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black [&.show_.bi-chevron-down]:-rotate-180">
    <span class="pointer-events-none">Dropdown End</span>
    <span class="pointer-events-none transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropdown2" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out start-auto end-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>
              
            

              
<!-- dropdown up -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
    <span>Dropdown Up</span>
    <span :class="{ 'rotate-0': dropdown == true }" class="transform duration-300 ms-auto -rotate-180 bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser3" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:bottom-14 bottom-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- dropdown side -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
    <span>Dropdown Side</span>
    <span :class="{ 'rotate-90': dropdown == true }" class="transform duration-300 -rotate-90 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser4" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-0 top-0 z-30 transition duration-400 ease-in-out start-full end-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>
              
            

              
<!-- dropdown up -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown3" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black [&.show_.bi-chevron-down]:rotate-0">
    <span>Dropdown Up</span>
    <span class="transform duration-300 ms-auto -rotate-180 bi bi-chevron-down"></span>
  </button>

  <ul id="dropdown3" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:bottom-14 bottom-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- dropdown side -->
<div class="relative">
  <button data-type="dropdown" data-target="#dropdown4" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black [&.show_.bi-chevron-down]:rotate-90">
    <span>Dropdown Side</span>
    <span class="transform duration-300 -rotate-90 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropdown4" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible raiytahskcn max-sm:top-0 top-0 z-30 transition duration-400 ease-in-out start-full end-0 min-w-[180px] inline-hsdfdsfhsdf oskasdadiaa rounded-lg bg-white dark:bg-neutral-600 border border-black shadow-[4px_4px_0_0_#000000] py-2 max-sm:start-4 max-sm:end-4">
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="#" class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-3 py-2 px-6 hover:text-white hover:bg-black">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>