Select Basic

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Basic Select -->
    <div class="space-y-2">
      <label for="basic-select" class="block text-sm font-medium text-gray-700 mb-1">Basic Select</label>
      <select id="basic-select" class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option disabled selected>Pick a color</option>
        <option>Crimson</option>
        <option>Amber</option>
        <option>Velvet</option>
        <option>Teal</option>
        <option>Indigo</option>
      </select>
      <p class="text-sm text-gray-500">Select an option from the dropdown</p>
    </div>

    <!-- Select with Group -->
    <div class="space-y-2">
      <label for="group-select" class="block text-sm font-medium text-gray-700 mb-1">Select with Option Groups</label>
      <select id="group-select" class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option disabled selected>Select a category</option>
        <optgroup label="Fruits">
          <option>Apple</option>
          <option>Orange</option>
          <option>Banana</option>
        </optgroup>
        <optgroup label="Vegetables">
          <option>Carrot</option>
          <option>Broccoli</option>
          <option>Spinach</option>
        </optgroup>
      </select>
    </div>
    
    <!-- Rounded Select -->
    <div class="space-y-2">
      <label for="rounded-select" class="block text-sm font-medium text-gray-700 mb-1">Rounded Select</label>
      <select id="rounded-select" class="w-full px-4 py-2 bg-white border border-gray-300 rounded-full shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option disabled selected>Choose a planet</option>
        <option>Mercury</option>
        <option>Venus</option>
        <option>Earth</option>
        <option>Mars</option>
        <option>Jupiter</option>
      </select>
    </div>
  </div>
</section>