Custom Select Menu

<!--
  Day 17: Custom select menu

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Select Menu -->
<div
  class="relative mx-auto w-full max-w-lg rounded-xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-lg bg-white p-4">
    <!-- Select Menu Container -->
    <div class="relative w-full">
      <!-- Select Menu Toggle -->
      <div class="space-y-1">
        <label class="inline-block text-sm font-medium">Choose an option</label>
        <button
          type="button"
          id="select-menu-button"
          class="group flex w-full items-center justify-between gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-left leading-6 hover:border-slate-300 focus:border-indigo-600 focus:ring-3 focus:ring-indigo-300/50 focus:outline-hidden"
          aria-haspopup="listbox"
          aria-controls="select-menu-list"
        >
          <span class="grow truncate text-slate-500">Please select..</span>
          <svg
            class="hi-mini hi-chevron-down inline-block size-5 flex-none text-slate-400 transition group-hover:text-indigo-500"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>
      <!-- END Select Menu Toggle -->

      <!-- Select Menu -->
      <ul
        id="select-menu-list"
        class="absolute inset-x-0 z-10 mt-1.5 max-h-60 origin-top overflow-y-auto rounded-lg border border-slate-200 bg-white py-2 shadow-lg shadow-slate-200/50 focus:outline-hidden"
        aria-labelledby="select-menu-button"
        aria-orientation="vertical"
        role="listbox"
        tabindex="0"
      >
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm font-semibold text-slate-950 hover:bg-slate-100 focus:bg-slate-100 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">Laravel + Vue.js</div>
          <div
            class="pointer-events-none size-5 flex-none text-indigo-600"
            aria-hidden="true"
          >
            <svg
              class="hi-mini hi-check inline-block size-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </li>
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-950 focus:bg-slate-100 focus:text-slate-950 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">Laravel + React</div>
          <div
            class="pointer-events-none invisible size-5 flex-none text-indigo-600"
            aria-hidden="true"
          ></div>
        </li>
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-950 focus:bg-slate-100 focus:text-slate-950 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">Next.js</div>
          <div
            class="pointer-events-none invisible size-5 flex-none text-indigo-600"
            aria-hidden="true"
          ></div>
        </li>
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-950 focus:bg-slate-100 focus:text-slate-950 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">Nuxt</div>
          <div
            class="pointer-events-none invisible size-5 flex-none text-indigo-600"
            aria-hidden="true"
          ></div>
        </li>
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-950 focus:bg-slate-100 focus:text-slate-950 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">Astro</div>
          <div
            class="pointer-events-none invisible size-5 flex-none text-indigo-600"
            aria-hidden="true"
          ></div>
        </li>
        <li
          class="group flex cursor-pointer items-center justify-between gap-2 px-4 text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-950 focus:bg-slate-100 focus:text-slate-950 focus:outline-hidden active:bg-slate-200"
          role="option"
          tabindex="-1"
        >
          <div class="grow truncate py-2">SvelteKit</div>
          <div
            class="pointer-events-none invisible size-5 flex-none text-indigo-600"
            aria-hidden="true"
          ></div>
        </li>
      </ul>
      <!-- END Select Menu -->
    </div>
    <!-- END Select Menu Container -->
  </div>
</div>
<!-- END Select Menu -->