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="tex-sm mt-1 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="tex-sm mt-1 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>