Filter Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-2xl mx-auto space-y-8">
    <!-- Primary Color Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Primary Color</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-md bg-blue-100 text-blue-700 flex items-center justify-center cursor-pointer hover:bg-blue-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="primary" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-blue-100 text-blue-700 cursor-pointer peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="primary" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-blue-100 text-blue-700 cursor-pointer peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="primary" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-blue-100 text-blue-700 cursor-pointer peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Success Color Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Success Color</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-md bg-green-100 text-green-700 flex items-center justify-center cursor-pointer hover:bg-green-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="success" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-green-100 text-green-700 cursor-pointer peer-checked:bg-green-600 peer-checked:text-white hover:bg-green-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="success" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-green-100 text-green-700 cursor-pointer peer-checked:bg-green-600 peer-checked:text-white hover:bg-green-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="success" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-green-100 text-green-700 cursor-pointer peer-checked:bg-green-600 peer-checked:text-white hover:bg-green-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Warning Color Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Warning Color</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-md bg-yellow-100 text-yellow-700 flex items-center justify-center cursor-pointer hover:bg-yellow-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="warning" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-yellow-100 text-yellow-700 cursor-pointer peer-checked:bg-yellow-500 peer-checked:text-white hover:bg-yellow-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="warning" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-yellow-100 text-yellow-700 cursor-pointer peer-checked:bg-yellow-500 peer-checked:text-white hover:bg-yellow-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="warning" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-yellow-100 text-yellow-700 cursor-pointer peer-checked:bg-yellow-500 peer-checked:text-white hover:bg-yellow-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Danger Color Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Danger Color</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-md bg-red-100 text-red-700 flex items-center justify-center cursor-pointer hover:bg-red-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="danger" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-red-100 text-red-700 cursor-pointer peer-checked:bg-red-600 peer-checked:text-white hover:bg-red-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="danger" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-red-100 text-red-700 cursor-pointer peer-checked:bg-red-600 peer-checked:text-white hover:bg-red-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="danger" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded-md bg-red-100 text-red-700 cursor-pointer peer-checked:bg-red-600 peer-checked:text-white hover:bg-red-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
  </div>
</section>