Selects

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="basic" class="text-xs font-medium text-gray-500"> Best Fruit </label>
  <select
    id="basic"
    name="basic"
    class="block w-full truncate rounded-md border-gray-200 pr-8 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
    <option selected>Oranges</option>
    <option>Apples</option>
    <option>Tomato</option>
  </select>
</div>

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="disabled" class="text-xs font-medium text-gray-500"> Best Fruit </label>
  <select
    disabled
    id="disabled"
    name="disabled"
    class="block w-full truncate rounded-md border-gray-200 pr-8 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
    <option selected>Oranges</option>
    <option>Apples</option>
    <option>Tomato</option>
  </select>
</div>

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="error" class="text-xs font-medium text-gray-500"> Best Fruit </label>
  <select
    id="error"
    name="error"
    class="block w-full truncate rounded-md border-red-600 pr-8 text-sm ring-1 ring-red-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
    <option>Oranges</option>
    <option>Apples</option>
    <option selected>Tomato</option>
  </select>
  <p class="pt-1 text-xs font-medium text-red-600">Sorry we don't consider that as a fruit</p>
</div>

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="icon-avatar" class="text-xs font-medium text-gray-500"> Best Fruit </label>
  <div class="relative">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
      <img
        class="flex h-5 w-5 shrink-0 rounded-full bg-gray-100 object-cover object-center"
        src="https://source.boringavatars.com/beam/1?square" />
    </div>
    <select
      id="icon-avatar"
      name="icon-avatar"
      class="block w-full truncate rounded-md border-gray-200 pl-9 pr-8 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
      <option>Oranges</option>
      <option selected>Apples</option>
      <option>Tomato</option>
    </select>
  </div>
</div>

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-0.5">
  <label for="icon-prefix" class="text-xs font-medium text-gray-500"> Best Fruit </label>
  <div class="relative">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
      <svg class="h-5 w-5 fill-transparent stroke-gray-400" viewBox="0 0 256 256">
        <path
          d="M218.5,162.9C205.9,193.7,183.1,216,164,216H92c-28,0-64-48-64-100A60,60,0,0,1,128,71.3h0a60,60,0,0,1,87.2,7.6h0a48,48,0,0,0,3.3,84Z"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></path>
        <path
          d="M218.5,162.9C205.9,193.7,183.1,216,164,216H92c-28,0-64-48-64-100A60,60,0,0,1,128,71.3h0a60,60,0,0,1,87.2,7.6h0a48,48,0,0,0,3.3,84Z"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></path>
        <path
          d="M143.5,23.4A31.9,31.9,0,0,1,168,12"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="24"></path>
      </svg>
    </div>
    <select
      id="icon-prefix"
      name="icon-prefix"
      class="block w-full truncate rounded-md border-gray-200 pl-9 pr-8 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
      <option>Oranges</option>
      <option selected>Apples</option>
      <option>Tomato</option>
    </select>
  </div>
</div>