Select

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="basic" class="text-xs font-medium text-slate-500">Select the best fruit</label>
  <select id="basic" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-slate-300">
    <option selected="">Oranges</option>
    <option>Apples</option>
    <option>Tomato</option>
  </select>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="disabled" class="text-xs font-medium text-slate-500">Select the best fruit</label>
  <select id="disabled" disabled="" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-slate-300">
    <option selected="">Oranges</option>
    <option>Apples</option>
    <option>Tomato</option>
  </select>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="w-full space-y-0.5">
  <label for="error" class="text-xs font-medium text-slate-500">Select the best fruit</label>
  <select id="error" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-red-600 ring-1 ring-red-600">
    <option selected="">Oranges</option>
    <option>Apples</option>
    <option>Tomato</option>
  </select>
  <p class="pt-1 text-xs font-medium text-red-600">Sorry, we don&#x27;t consider that as a fruit</p>
</div>