Selects

                  
<!-- Select -->
<div class="relative mb-6">
  <label for="select-basic" class="mb-2 block">Select</label>
  <select id="select-basic" class="w-full uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-500 focus:outline-none focus:ring-0 accent-primary-300">
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<!-- Select Group -->
<div class="relative mb-6">
  <label for="select-group" class="mb-2 block">Select with Groups</label>
  <select id="select-group" class="w-full uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-500 focus:outline-none focus:ring-0 accent-primary-300">
    <option value="" disabled selected>Select an option</option>
    <optgroup label="Group 1" class="text-primary-300">
      <option value="group1-option1">Group 1 - Option 1</option>
      <option value="group1-option2">Group 1 - Option 2</option>
    </optgroup>
    <optgroup label="Group 2" class="text-primary-300">
      <option value="group2-option1">Group 2 - Option 1</option>
      <option value="group2-option2">Group 2 - Option 2</option>
    </optgroup>
  </select>
</div>