use ui and li write a select

HTML
<div class="flex items-center justify-center pt-48">
  <div
    class="inline-flex w-96 items-center justify-between gap-3 rounded-full px-2 text-gray-500 ring ring-indigo-300"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-search"
    >
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
    <input
      class="w-full border-none p-2 outline-none placeholder:text-center"
      placeholder="what do you want to watch?"
    />
    <span class="rounded-full p-1 text-gray-500 hover:bg-gray-100">
      <span class="flex cursor-pointer gap-2">
        <p>default</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevrons-up-down"
        >
          <path d="m7 15 5 5 5-5" />
          <path d="m7 9 5-5 5 5" />
        </svg>
      </span>
      <ul class="hidden border-none bg-transparent outline-none">
        <li value="" class="border-none bg-white outline-none">Youtube</li>
        <li value="" class="border-none bg-white outline-none">Youtube</li>
        <li value="" class="border-none bg-white outline-none">Youtube</li>
      </ul>
    </span>
  </div>
</div>