Select Sizes

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