select #01

<div class="flex justify-center w-full px-12 py-48">
  <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
    <div class="w-full">
      <label for="country" class="block mb-1 font-medium text-base-500 text-xs"
        >Country</label
      >
      <div class="relative">
        <select
          value="ca"
          id="country"
          name="country"
          class="block transition duration-300 ease-in-out h-8 px-4 py-2 text-xs ring-1 bg-white focus:ring-2 text-base-500 ring-base-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-base-400 focus:bg-transparent focus:border-base-300 focus:ring-accent-500 focus:ring-offset-white rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md text-base-900"
          aria-invalid="false"
        >
          <option value="us">United States</option>
          <option value="ca" selected>Canada</option>
          <option value="uk">United Kingdom</option>
        </select>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
        ></div>
      </div>
    </div>
    <div class="w-full">
      <label for="country" class="block mb-1 font-medium text-base-500 text-sm"
        >Country</label
      >
      <div class="relative">
        <select
          value="ca"
          id="country"
          name="country"
          class="block transition duration-300 ease-in-out h-9 px-4 py-2 text-xs ring-1 bg-white focus:ring-2 text-base-500 ring-base-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-base-400 focus:bg-transparent focus:border-base-300 focus:ring-accent-500 focus:ring-offset-white rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md text-base-900"
          aria-invalid="false"
        >
          <option value="us">United States</option>
          <option value="ca" selected>Canada</option>
          <option value="uk">United Kingdom</option>
        </select>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
        ></div>
      </div>
    </div>
    <div class="w-full">
      <label for="country" class="block mb-1 font-medium text-base-500 text-sm"
        >Country</label
      >
      <div class="relative">
        <select
          value="ca"
          id="country"
          name="country"
          class="block transition duration-300 ease-in-out h-10 px-4 py-2 text-sm ring-1 bg-white focus:ring-2 text-base-500 ring-base-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-base-400 focus:bg-transparent focus:border-base-300 focus:ring-accent-500 focus:ring-offset-white rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md text-base-900"
          aria-invalid="false"
        >
          <option value="us">United States</option>
          <option value="ca" selected>Canada</option>
          <option value="uk">United Kingdom</option>
        </select>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
        ></div>
      </div>
    </div>
    <div class="w-full">
      <label
        for="country"
        class="block mb-1 font-medium text-base-500 text-base"
        >Country</label
      >
      <div class="relative">
        <select
          value="ca"
          id="country"
          name="country"
          class="block transition duration-300 ease-in-out h-12 px-4 py-2.5 text-base ring-1 bg-white focus:ring-2 text-base-500 ring-base-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-base-400 focus:bg-transparent focus:border-base-300 focus:ring-accent-500 focus:ring-offset-white rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md text-base-900"
          aria-invalid="false"
        >
          <option value="us">United States</option>
          <option value="ca" selected>Canada</option>
          <option value="uk">United Kingdom</option>
        </select>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
        ></div>
      </div>
    </div>
    <div class="w-full">
      <label for="country" class="block mb-1 font-medium text-base-500 text-sm"
        >Country</label
      >
      <div class="relative">
        <select
          value="ca"
          id="country"
          name="country"
          class="block transition duration-300 ease-in-out h-14 px-5 py-3 text-lg ring-1 bg-white focus:ring-2 text-base-500 ring-base-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-base-400 focus:bg-transparent focus:border-base-300 focus:ring-accent-500 focus:ring-offset-white rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md text-base-900"
          aria-invalid="false"
        >
          <option value="us">United States</option>
          <option value="ca" selected>Canada</option>
          <option value="uk">United Kingdom</option>
        </select>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
        ></div>
      </div>
    </div>
  </div>
</div>