Select Colors

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