forms
Tailwind CSS Select
<div class="mx-auto max-w-xs">
<select id="example1" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example2" class="mb-1 block text-sm font-medium text-gray-700">Language</label>
<select id="example2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example3" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']">Language</label>
<select id="example3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
<p class="mt-1 text-sm text-gray-500">This is a help message.</p>
</div>
<div class="mx-auto max-w-xs">
<label for="example4" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']">Language</label>
<select id="example4" class="mt-1 block w-full rounded-md border-red-300 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
<p class="mt-1 text-sm text-red-500">This is a error message.</p>
</div>
<div class="mx-auto max-w-xs">
<select id="example5" disabled class="block w-full rounded-md border-gray-300 text-gray-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example6" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']">Language</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
</svg>
</div>
<select id="example6" class="block w-full rounded-md border-gray-300 pl-10 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Select language</option>
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
</div>
</div>
<div class="mx-auto max-w-xs space-y-5">
<select id="example7" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Default</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select id="example8" class="block w-full border-0 border-b-2 border-gray-200 focus:border-primary-500 focus:ring-0 disabled:cursor-not-allowed">
<option value="">Underline</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select id="example9" class="block w-full rounded-md border-transparent bg-gray-100 focus:border-primary-300 focus:bg-white focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Fill</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs space-y-5">
<select id="example10" class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Small</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select id="example11" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Normal</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select id="example12" class="block w-full rounded-md border-gray-300 py-3 text-xl shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50">
<option value="">Large</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>