Tailwind CSS Select

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using:

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

1. Tailwind Select Basic

Minimal Select

<div class="w-64">
  <label for="minimal-select" class="block text-sm font-medium text-gray-700">Minimal Select</label>
  <select id="minimal-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

2. Tailwind Select Shadow

Select with Shadow

<div class="w-64">
  <label for="shadowed-select" class="block text-sm font-medium text-gray-700">Select with Shadow</label>
  <select id="shadowed-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

3. Tailwind Select Icon

Select with Icon

<div class="w-64 relative">
  <label for="icon-select" class="block text-sm font-medium text-gray-700">Select with Icon</label>
  <select id="icon-select" class="mt-1 block w-full pl-10 pr-10 py-2 bg-white border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    <svg class="h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
    </svg>
  </div>
</div>

4. Tailwind Select Rounded Full-Width

Full-Width Rounded Select

<div class="w-full">
  <label for="rounded-select" class="block text-sm font-medium text-gray-700">Full-Width Rounded Select</label>
  <select id="rounded-select" class="mt-1 block w-full px-4 py-3 bg-white border border-gray-300 rounded-full text-gray-900 focus:ring-2 focus:ring-green-500 focus:border-green-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

5. Tailwind Select Hover Transition

Outline on Hover Select

<div class="w-64">
  <label for="hover-select" class="block text-sm font-medium text-gray-700">Outline on Hover Select</label>
  <select id="hover-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-gray-900 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 hover:border-indigo-400 hover:bg-gray-50">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>