Select Ghost

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