Tailwind CSS home page
  1. DATA DISPLAY
  2. List

​
Basic usage

​
Basic select

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
usage