Drop down menu - default

<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>

<div data-dropdown-wrapper class="bsk-dropdown-light">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>