Tailwind CSS Select Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Basic Fieldset Select -->
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">Browsers</legend>
      <div class="space-y-2">
        <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 browser</option>
          <option>Chrome</option>
          <option>Firefox</option>
          <option>Safari</option>
          <option>Edge</option>
          <option>Opera</option>
        </select>
        <span class="block text-xs text-gray-500">Optional</span>
      </div>
    </fieldset>

    <!-- Required Fieldset Select -->
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">Operating System</legend>
      <div class="space-y-2">
        <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" required>
          <option disabled selected>Choose your OS</option>
          <option>Windows</option>
          <option>macOS</option>
          <option>Linux</option>
          <option>ChromeOS</option>
        </select>
        <span class="block text-xs text-red-500">Required *</span>
      </div>
    </fieldset>
    
    <!-- Fieldset with Description -->
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">Programming Language</legend>
      <div class="space-y-4">
        <p class="text-sm text-gray-600">Select your preferred programming language</p>
        <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 language</option>
          <option>JavaScript</option>
          <option>Python</option>
          <option>Java</option>
          <option>C#</option>
          <option>Go</option>
          <option>Rust</option>
        </select>
        <span class="block text-xs text-gray-500">This helps us customize your experience</span>
      </div>
    </fieldset>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Extra Small Select -->
    <div class="space-y-2">
      <label for="xs-select" class="block text-sm font-medium text-gray-700 mb-1">Extra Small Select</label>
      <select id="xs-select" class="w-full px-2 py-1 text-xs 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>Xsmall</option>
        <option>Xsmall Apple</option>
        <option>Xsmall Orange</option>
        <option>Xsmall Tomato</option>
      </select>
    </div>

    <!-- Small Select -->
    <div class="space-y-2">
      <label for="sm-select" class="block text-sm font-medium text-gray-700 mb-1">Small Select</label>
      <select id="sm-select" class="w-full px-2 py-1.5 text-sm 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>Small</option>
        <option>Small Apple</option>
        <option>Small Orange</option>
        <option>Small Tomato</option>
      </select>
    </div>
    
    <!-- Medium Select (Default) -->
    <div class="space-y-2">
      <label for="md-select" class="block text-sm font-medium text-gray-700 mb-1">Medium Select (Default)</label>
      <select id="md-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>Medium</option>
        <option>Medium Apple</option>
        <option>Medium Orange</option>
        <option>Medium Tomato</option>
      </select>
    </div>
    
    <!-- Large Select -->
    <div class="space-y-2">
      <label for="lg-select" class="block text-sm font-medium text-gray-700 mb-1">Large Select</label>
      <select id="lg-select" class="w-full px-4 py-3 text-lg 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>Large</option>
        <option>Large Apple</option>
        <option>Large Orange</option>
        <option>Large Tomato</option>
      </select>
    </div>
    
    <!-- Extra Large Select -->
    <div class="space-y-2">
      <label for="xl-select" class="block text-sm font-medium text-gray-700 mb-1">Extra Large Select</label>
      <select id="xl-select" class="w-full px-5 py-4 text-xl 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>Xlarge</option>
        <option>Xlarge Apple</option>
        <option>Xlarge Orange</option>
        <option>Xlarge Tomato</option>
      </select>
    </div>
    
    <!-- Responsive Select (Size Adapts to Screen) -->
    <div class="space-y-2">
      <label for="responsive-select" class="block text-sm font-medium text-gray-700 mb-1">Responsive Select</label>
      <select id="responsive-select" class="w-full px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm md:px-4 md:py-2 md:text-base lg:px-4 lg:py-3 lg:text-lg 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>Responsive</option>
        <option>Responsive Apple</option>
        <option>Responsive Orange</option>
        <option>Responsive Tomato</option>
      </select>
      <p class="text-sm text-gray-500">This select adapts its size to the screen width</p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Ghost Select (No Background) -->
    <div class="space-y-2">
      <label for="ghost-select" class="block text-sm font-medium text-gray-700 mb-1">Ghost Select (No Background)</label>
      <select id="ghost-select" class="w-full px-4 py-2 bg-transparent 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 font</option>
        <option>Inter</option>
        <option>Poppins</option>
        <option>Raleway</option>
        <option>Montserrat</option>
        <option>Roboto</option>
      </select>
      <p class="text-sm text-gray-500">Transparent background select</p>
    </div>

    <!-- Borderless Ghost Select -->
    <div class="space-y-2">
      <label for="borderless-ghost" class="block text-sm font-medium text-gray-700 mb-1">Borderless Ghost Select</label>
      <select id="borderless-ghost" class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 focus:outline-none focus:ring-0 focus:border-blue-500">
        <option disabled selected>Choose a framework</option>
        <option>React</option>
        <option>Vue</option>
        <option>Angular</option>
        <option>Svelte</option>
      </select>
      <p class="text-sm text-gray-500">Minimal style with bottom border only</p>
    </div>
    
    <!-- Dashed Border Ghost Select -->
    <div class="space-y-2">
      <label for="dashed-ghost" class="block text-sm font-medium text-gray-700 mb-1">Dashed Border Ghost Select</label>
      <select id="dashed-ghost" class="w-full px-4 py-2 bg-transparent border border-dashed border-gray-400 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option disabled selected>Select a design system</option>
        <option>Material Design</option>
        <option>Fluent Design</option>
        <option>Apple Human Interface</option>
        <option>Tailwind UI</option>
      </select>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Simple Disabled Select -->
    <div class="space-y-2">
      <label for="disabled-select" class="block text-sm font-medium text-gray-400 mb-1">Disabled Select</label>
      <select id="disabled-select" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm text-gray-500 cursor-not-allowed" disabled>
        <option>You can't touch this</option>
      </select>
      <p class="text-sm text-gray-400">This select is completely disabled</p>
    </div>

    <!-- Disabled with Preselected Value -->
    <div class="space-y-2">
      <label for="disabled-with-value" class="block text-sm font-medium text-gray-400 mb-1">Disabled with Preselected Value</label>
      <select id="disabled-with-value" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm text-gray-500 cursor-not-allowed" disabled>
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <p class="text-sm text-gray-400">This select has a preselected value and cannot be changed</p>
    </div>
    
    <!-- Disabled with Custom Style -->
    <div class="space-y-2">
      <label for="custom-disabled" class="block text-sm font-medium text-gray-400 mb-1">Custom Disabled Style</label>
      <div class="relative">
        <select id="custom-disabled" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-md shadow-sm text-gray-400 appearance-none cursor-not-allowed opacity-75" disabled>
          <option selected>Read-only selection</option>
          <option>Cannot be changed</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </div>
      </div>
      <p class="text-sm text-gray-400">Custom styled disabled select with dropdown icon</p>
    </div>
    
    <!-- Disabled with ARIA Attributes -->
    <div class="space-y-2">
      <label for="aria-disabled" class="block text-sm font-medium text-gray-400 mb-1">ARIA Disabled Select</label>
      <select id="aria-disabled" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm text-gray-500 cursor-not-allowed" disabled aria-disabled="true">
        <option selected>This selection is locked</option>
        <option>Not available</option>
      </select>
      <p class="text-sm text-gray-400">This select includes ARIA attributes for accessibility</p>
    </div>
    
    <!-- Read-only Appearance -->
    <div class="space-y-2">
      <label for="readonly-select" class="block text-sm font-medium text-gray-700 mb-1">Read-only Select (Simulated)</label>
      <div class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-700">
        Selected value: Administrator
      </div>
      <p class="text-sm text-gray-500">This simulates a select that shows only the current value</p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Default Select -->
    <div class="space-y-2">
      <label for="default-select" class="block text-sm font-medium text-gray-700 mb-1">Default Select</label>
      <select id="default-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-gray-500 focus:border-gray-500">
        <option disabled selected>Choose an option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>

    <!-- Primary Color Select -->
    <div class="space-y-2">
      <label for="primary-select" class="block text-sm font-medium text-gray-700 mb-1">Primary Color Select</label>
      <select id="primary-select" class="w-full px-4 py-2 bg-white border border-blue-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-blue-600">
        <option disabled selected>Pick a text editor</option>
        <option>VSCode</option>
        <option>Sublime Text</option>
        <option>Atom</option>
        <option>Vim</option>
        <option>Emacs</option>
      </select>
    </div>
    
    <!-- Secondary Color Select -->
    <div class="space-y-2">
      <label for="secondary-select" class="block text-sm font-medium text-gray-700 mb-1">Secondary Color Select</label>
      <select id="secondary-select" class="w-full px-4 py-2 bg-white border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-purple-600">
        <option disabled selected>Pick a language</option>
        <option>Zig</option>
        <option>Go</option>
        <option>Rust</option>
        <option>TypeScript</option>
      </select>
    </div>
    
    <!-- Success Color Select -->
    <div class="space-y-2">
      <label for="success-select" class="block text-sm font-medium text-gray-700 mb-1">Success Color Select</label>
      <select id="success-select" class="w-full px-4 py-2 bg-white border border-green-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 text-green-600">
        <option disabled selected>Select a category</option>
        <option>Approved</option>
        <option>Completed</option>
        <option>Confirmed</option>
        <option>Verified</option>
      </select>
    </div>
    
    <!-- Warning Color Select -->
    <div class="space-y-2">
      <label for="warning-select" class="block text-sm font-medium text-gray-700 mb-1">Warning Color Select</label>
      <select id="warning-select" class="w-full px-4 py-2 bg-white border border-yellow-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-yellow-600">
        <option disabled selected>Select priority</option>
        <option>Medium</option>
        <option>High</option>
        <option>Important</option>
        <option>Urgent</option>
      </select>
    </div>
    
    <!-- Error Color Select -->
    <div class="space-y-2">
      <label for="error-select" class="block text-sm font-medium text-gray-700 mb-1">Error Color Select</label>
      <select id="error-select" class="w-full px-4 py-2 bg-white border border-red-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 text-red-600">
        <option disabled selected>Select issue type</option>
        <option>Bug</option>
        <option>Error</option>
        <option>Critical</option>
        <option>Blocker</option>
      </select>
    </div>
  </div>
</section> 
                        

                            <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>