select

              <div class="w-full">
  <label for="country" class="block mb-1 font-medium text-zinc-500 text-sm"
    >Country</label
  >
  <div class="relative mt-1">
    <select
      value="ca"
      id="country"
      name="country"
      class="block transition duration-300 ease-in-out appearance-none h-10 pl-4 pr-10 py-2 text-sm ring-1 bg-white focus:ring-2 text-zinc-500 ring-zinc-200 border-transparent focus:outline-none focus:ring-offset-2 placeholder-zinc-400 focus:bg-transparent focus:border-zinc-300 focus:ring-blue-500 focus:ring-offset-white rounded-md w-full"
      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>