Search Dropdown

<!--
  Day 10: Search dropdown

  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
-->

<!-- Search Dropdown -->
<div class="relative mx-auto w-full max-w-md rounded-lg">
  <div class="relative mb-3 h-12">
    <input
      type="text"
      class="absolute inset-0 rounded-2xl border border-slate-300 bg-white pr-12 pl-12 focus:border-white focus:ring-3 focus:ring-blue-400 focus:outline-hidden"
      value="Web Application"
      placeholder="Search.."
    />
    <div
      class="absolute top-0 bottom-0 left-0 flex w-12 items-center justify-center"
    >
      <svg
        class="hi-outline hi-magnifying-glass inline-block size-6 text-slate-500"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
        />
      </svg>
    </div>
    <div
      class="absolute top-0 right-0 bottom-0 flex w-12 items-center justify-center"
    >
      <button
        type="button"
        class="inline-flex size-5 items-center justify-center text-slate-600 hover:text-slate-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          aria-hidden="true"
          class="hi-outline hi-x-mark inline-block size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
  </div>
  <nav
    class="flex flex-col gap-2.5 rounded-2xl border border-slate-300 bg-white p-2.5 shadow-lg"
  >
    <a
      href="javascript:void(0)"
      class="group flex items-center gap-4 rounded-2xl p-1.5 hover:bg-slate-100"
    >
      <div
        class="flex size-14 flex-none items-center justify-center rounded-xl bg-indigo-500 text-white"
      >
        <svg
          class="hi-outline hi-cursor-arrow-rays inline-block size-6"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59"
          />
        </svg>
      </div>
      <div class="grow">
        <h3 class="font-semibold">UXLyfe</h3>
        <h4 class="text-sm font-medium text-slate-500">
          $39/m &bull; Design websites &amp; web apps
        </h4>
      </div>
      <div
        class="flex w-6 flex-none items-center justify-center text-slate-500 opacity-0 group-hover:opacity-100 sm:w-10"
      >
        <svg
          class="hi-mini hi-arrow-right 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="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center gap-4 rounded-2xl p-1.5 hover:bg-slate-100"
    >
      <div
        class="flex size-14 flex-none items-center justify-center rounded-xl bg-emerald-500 text-white"
      >
        <svg
          class="hi-outline hi-moon inline-block size-6"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
          />
        </svg>
      </div>
      <div class="grow">
        <h3 class="font-semibold">LunarWebScape</h3>
        <h4 class="text-sm font-medium text-slate-500">
          $29/m &bull; Brings your designs to life
        </h4>
      </div>
      <div
        class="flex w-6 flex-none items-center justify-center text-slate-500 opacity-0 group-hover:opacity-100 sm:w-10"
      >
        <svg
          class="hi-mini hi-arrow-right 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="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center gap-4 rounded-2xl p-1.5 hover:bg-slate-100"
    >
      <div
        class="flex size-14 flex-none items-center justify-center rounded-xl bg-purple-500 text-white"
      >
        <svg
          class="hi-outline hi-eye-dropper inline-block size-6"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"
          />
        </svg>
      </div>
      <div class="grow">
        <h3 class="font-semibold">DesignTrix</h3>
        <h4 class="text-sm font-medium text-slate-500">
          $16/m &bull; The last design tool you need
        </h4>
      </div>
      <div
        class="flex w-6 flex-none items-center justify-center text-slate-500 opacity-0 group-hover:opacity-100 sm:w-10"
      >
        <svg
          class="hi-mini hi-arrow-right 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="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center gap-4 rounded-2xl p-1.5 hover:bg-slate-100"
    >
      <div
        class="flex size-14 flex-none items-center justify-center rounded-xl bg-orange-500 text-white"
      >
        <svg
          class="hi-outline hi-squares-plus inline-block size-6"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
          />
        </svg>
      </div>
      <div class="grow">
        <h3 class="font-semibold">Creative Code</h3>
        <h4 class="text-sm font-medium text-slate-500">
          $49/m &bull; Build with no code tools
        </h4>
      </div>
      <div
        class="flex w-6 flex-none items-center justify-center text-slate-500 opacity-0 group-hover:opacity-100 sm:w-10"
      >
        <svg
          class="hi-mini hi-arrow-right 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="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </a>
  </nav>
</div>
<!-- END Search Dropdown -->