Searchbar - React

Searchbar

<div class="flex flex-row gap-4 lg:gap-6 w-max-[300px] items-start justify-start w-full relative">
  <div class="w-full relative group">
    <div class="ina-text-field">
      <div class="ina-text-field__wrapper">
        <span class="ina-text-field__icon ina-text-field__icon--prefix">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
            <path d="M21 21l-6 -6"></path>
          </svg>
        </span>
        <input type="text" class="ina-text-field__input" placeholder="Search..." />
      </div>
    </div>
    <!-- Dummy Dropdown Content (Hidden by default, shown on group hover/focus-within) -->
    <div
      class="absolute top-12 left-0 w-full bg-white border border-neutral-200 shadow-md rounded-lg z-10 hidden group-focus-within:block group-hover:block"
    >
      <div class="p-4 flex flex-col max-h-64 overflow-y-auto w-full cursor-pointer space-y-2">
        <p class="text-[10px] sm:text-xs text-content-secondary mb-2">Hasil Pencarian</p>
        <div class="cursor-pointer hover:bg-gray-50 rounded">
          <h3 class="text-sm md:text-base">Accordion</h3>
          <p class="text-xs md:text-sm text-content-secondary">0123456789</p>
        </div>
        <div class="cursor-pointer hover:bg-gray-50 rounded">
          <h3 class="text-sm md:text-base">Alert</h3>
          <p class="text-xs md:text-sm text-content-secondary">0123456789</p>
        </div>
      </div>
    </div>
  </div>
  <button class="bg-blue-400 ina-button ina-button--primary ina-button--md" type="button">
    Search
  </button>
</div>