Label For Select

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Basic Select with Label -->
    <div>
      <label for="select-country" class="block text-sm font-medium text-gray-700 mb-1">
        Country
      </label>
      <select
        id="select-country"
        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      >
        <option value="" selected disabled>Select a country</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="au">Australia</option>
        <option value="jp">Japan</option>
      </select>
    </div>

    <!-- Select with Prefix Label -->
    <div>
      <label for="select-currency" class="block text-sm font-medium text-gray-700 mb-1">
        Currency
      </label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          Currency
        </span>
        <select
          id="select-currency"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="usd">USD ($)</option>
          <option value="eur">EUR (€)</option>
          <option value="gbp">GBP (£)</option>
          <option value="jpy">JPY (¥)</option>
          <option value="cad">CAD ($)</option>
        </select>
      </div>
    </div>

    <!-- Select with Icon Label -->
    <div>
      <label for="select-category" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
        </svg>
        Category
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
          </svg>
        </div>
        <select
          id="select-category"
          class="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="" selected disabled>Select a category</option>
          <option value="clothing">Clothing</option>
          <option value="electronics">Electronics</option>
          <option value="home">Home & Garden</option>
          <option value="books">Books</option>
          <option value="toys">Toys & Games</option>
        </select>
      </div>
    </div>

    <!-- Select with Helper Text -->
    <div>
      <label for="select-shipping" class="block text-sm font-medium text-gray-700 mb-1">
        Shipping Method
      </label>
      <select
        id="select-shipping"
        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      >
        <option value="standard">Standard Shipping (3-5 days)</option>
        <option value="express">Express Shipping (1-2 days)</option>
        <option value="overnight">Overnight Shipping (Next day)</option>
        <option value="pickup">Local Pickup (Free)</option>
      </select>
      <p class="mt-1 text-xs text-gray-500">
        Shipping costs will be calculated at checkout
      </p>
    </div>
  </div>
</section>