tailwind-ai/components/application_ui/forms/comboboxes/simple.html

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<label for="autocomplete" class="block text-sm/6 font-medium text-gray-900"
  >Assigned to</label
>
<el-autocomplete class="relative mt-2 block">
  <input
    id="autocomplete"
    type="text"
    class="block w-full rounded-md bg-white py-1.5 pr-12 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
  />
  <button
    type="button"
    class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2"
  >
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      data-slot="icon"
      aria-hidden="true"
      class="size-5 text-gray-400"
    >
      <path
        d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
        clip-rule="evenodd"
        fill-rule="evenodd"
      />
    </svg>
  </button>

  <el-options
    anchor="bottom end"
    popover
    class="max-h-60 w-(--input-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 [--anchor-gap:--spacing(1)] sm:text-sm"
  >
    <el-option
      value="Leslie Alexander"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Leslie Alexander</el-option
    >
    <el-option
      value="Michael Foster"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Michael Foster</el-option
    >
    <el-option
      value="Dries Vincent"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Dries Vincent</el-option
    >
    <el-option
      value="Lindsay Walton"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Lindsay Walton</el-option
    >
    <el-option
      value="Courtney Henry"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Courtney Henry</el-option
    >
    <el-option
      value="Tom Cook"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Tom Cook</el-option
    >
    <el-option
      value="Whitney Francis"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Whitney Francis</el-option
    >
    <el-option
      value="Leonard Krasner"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Leonard Krasner</el-option
    >
    <el-option
      value="Floyd Miles"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Floyd Miles</el-option
    >
    <el-option
      value="Emily Selman"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Emily Selman</el-option
    >
    <el-option
      value="Kristin Watson"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Kristin Watson</el-option
    >
    <el-option
      value="Emma Dorsey"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Emma Dorsey</el-option
    >
    <el-option
      value="Alicia Bell"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Alicia Bell</el-option
    >
    <el-option
      value="Jenny Wilson"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Jenny Wilson</el-option
    >
    <el-option
      value="Anna Roberts"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Anna Roberts</el-option
    >
    <el-option
      value="Benjamin Russel"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Benjamin Russel</el-option
    >
    <el-option
      value="Jeffrey Webb"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Jeffrey Webb</el-option
    >
    <el-option
      value="Kathryn Murphy"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Kathryn Murphy</el-option
    >
    <el-option
      value="Lawrence Hunter"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Lawrence Hunter</el-option
    >
    <el-option
      value="Yvette Armstrong"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Yvette Armstrong</el-option
    >
    <el-option
      value="Angela Fisher"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Angela Fisher</el-option
    >
    <el-option
      value="Blake Reid"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Blake Reid</el-option
    >
    <el-option
      value="Hector Gibbons"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Hector Gibbons</el-option
    >
    <el-option
      value="Fabricio Mendes"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Fabricio Mendes</el-option
    >
    <el-option
      value="Jillian Steward"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Jillian Steward</el-option
    >
    <el-option
      value="Chelsea Hagon"
      class="block truncate px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
      >Chelsea Hagon</el-option
    >
  </el-options>
</el-autocomplete>