Dropdown

<!-- Dropdown -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div class="flex justify-end">
  <!-- Dropdown Container -->
  <div
    x-data="{ open: false }"
    x-on:keydown.esc.prevent.stop="open = false"
    class="relative inline-block"
  >
    <!-- Dropdown Toggle Button -->
    <button
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
      id="pm-dropdown"
      aria-haspopup="true"
      x-bind:aria-expanded="open"
      x-on:click="open = true"
    >
      <span>User account</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        data-slot="icon"
        class="hi-micro hi-chevron-down inline-block size-4 opacity-50"
        x-bind:class="{
          'rotate-180': open
        }"
      >
        <path
          fill-rule="evenodd"
          d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <!-- END Dropdown Toggle Button -->

    <!-- Dropdown -->
    <div
      x-cloak
      x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 -translate-y-3"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-10"
      x-on:click.outside="open = false"
      role="menu"
      aria-labelledby="pm-dropdown"
      class="absolute end-0 z-10 mt-2 w-44 origin-top-right rounded-lg shadow-xl dark:shadow-zinc-950"
    >
      <div
        class="divide-y divide-zinc-100 rounded-lg bg-white ring-1 ring-black/5 dark:divide-zinc-700/75 dark:bg-zinc-800 dark:ring-zinc-700/75"
      >
        <div class="px-2.5 py-3">
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100/75 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              data-slot="icon"
              class="hi-mini hi-user-circle inline-block size-5 flex-none opacity-40 group-hover:opacity-80"
            >
              <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Profile</span>
          </a>
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100/75 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              data-slot="icon"
              class="hi-mini hi-wrench inline-block size-5 flex-none opacity-40 group-hover:opacity-80"
            >
              <path
                fill-rule="evenodd"
                d="M19 5.5a4.5 4.5 0 0 1-4.791 4.49c-.873-.055-1.808.128-2.368.8l-6.024 7.23a2.724 2.724 0 1 1-3.837-3.837L9.21 8.16c.672-.56.855-1.495.8-2.368a4.5 4.5 0 0 1 5.873-4.575c.324.105.39.51.15.752L13.34 4.66a.455.455 0 0 0-.11.494 3.01 3.01 0 0 0 1.617 1.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15.14.435.216.9.216 1.382ZM4 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Settings</span>
          </a>
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100/75 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              data-slot="icon"
              class="hi-mini hi-bell inline-block size-5 flex-none opacity-40 group-hover:opacity-80"
            >
              <path
                fill-rule="evenodd"
                d="M10 2a6 6 0 0 0-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 0 0 .515 1.076 32.91 32.91 0 0 0 3.256.508 3.5 3.5 0 0 0 6.972 0 32.903 32.903 0 0 0 3.256-.508.75.75 0 0 0 .515-1.076A11.448 11.448 0 0 1 16 8a6 6 0 0 0-6-6ZM8.05 14.943a33.54 33.54 0 0 0 3.9 0 2 2 0 0 1-3.9 0Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Notifications</span>
          </a>
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100/75 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              data-slot="icon"
              class="hi-mini hi-shield-check inline-block size-5 flex-none opacity-40 group-hover:opacity-80"
            >
              <path
                fill-rule="evenodd"
                d="M9.661 2.237a.531.531 0 0 1 .678 0 11.947 11.947 0 0 0 7.078 2.749.5.5 0 0 1 .479.425c.069.52.104 1.05.104 1.59 0 5.162-3.26 9.563-7.834 11.256a.48.48 0 0 1-.332 0C5.26 16.564 2 12.163 2 7c0-.538.035-1.069.104-1.589a.5.5 0 0 1 .48-.425 11.947 11.947 0 0 0 7.077-2.75Zm4.196 5.954a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Privacy</span>
          </a>
        </div>
        <div class="px-2.5 py-3">
          <form onsubmit="return false;">
            <button
              type="submit"
              role="menuitem"
              class="group flex w-full items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-start text-sm font-medium text-zinc-600 hover:bg-zinc-100/75 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-50"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                class="hi-mini hi-arrow-right-start-on-rectangle inline-block size-5 flex-none opacity-40 group-hover:opacity-80"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z"
                  clip-rule="evenodd"
                />
                <path
                  fill-rule="evenodd"
                  d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span class="grow">Logout</span>
            </button>
          </form>
        </div>
      </div>
    </div>
    <!-- END Dropdown -->
  </div>
  <!-- Dropdown Container -->
</div>
<!-- END Dropdown -->

<!-- Placeholder -->
<div
  class="mt-4 flex items-center justify-center rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 py-44 text-sm font-medium text-zinc-400 dark:border-zinc-700 dark:bg-zinc-950/25 dark:text-zinc-600"
>
  Dummy content
</div>