Select Disabled

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