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>
Sorry we don't consider that as a fruit
<!-- 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>