Selects

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->

<div class="w-full space-y-0.5">
  <label for="basic" class="text-sm 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-sm 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-sm 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 text-red-600">
    Sorry we don't consider that as a fruit
  </p>
</div>