Tailwind CSS Filter Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">Filter Categories</h3>
    
    <div class="mb-4 flex flex-wrap gap-2 items-center" id="filter-container">
      <button 
        type="button" 
        class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden" 
        id="reset-button">×</button>
        
      <label class="relative">
        <input type="radio" name="categories" value="all" class="absolute opacity-0 filter-radio" checked />
        <span class="inline-flex px-4 py-2 rounded-md bg-blue-500 text-white cursor-pointer hover:bg-blue-600 transition">
          All
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="technology" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Technology
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="design" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Design
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="business" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Business
        </span>
      </label>
    </div>
    
    <!-- Example content to be filtered -->
    <div class="grid grid-cols-1 gap-4 mt-6">
      <div class="p-4 border rounded-md" data-category="technology">
        <h4 class="font-medium">Web Development</h4>
        <p class="text-sm text-gray-600">Front-end and back-end technologies</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="design">
        <h4 class="font-medium">UI/UX Design</h4>
        <p class="text-sm text-gray-600">Creating beautiful user interfaces</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="business">
        <h4 class="font-medium">Digital Marketing</h4>
        <p class="text-sm text-gray-600">Strategies for online growth</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="technology">
        <h4 class="font-medium">Mobile Development</h4>
        <p class="text-sm text-gray-600">Building apps for iOS and Android</p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const filterRadios = document.querySelectorAll('.filter-radio');
      const resetButton = document.getElementById('reset-button');
      const items = document.querySelectorAll('[data-category]');
      
      // Handle filter change
      filterRadios.forEach(radio => {
        radio.addEventListener('change', function() {
          const selectedValue = this.value;
          
          // Show reset button only when not on "All"
          resetButton.classList.toggle('hidden', selectedValue === 'all');
          
          // Update active styles
          filterRadios.forEach(r => {
            const span = r.nextElementSibling;
            if (r.checked) {
              span.classList.remove('bg-gray-100', 'text-gray-700');
              span.classList.add('bg-blue-500', 'text-white');
            } else {
              span.classList.remove('bg-blue-500', 'text-white');
              span.classList.add('bg-gray-100', 'text-gray-700');
            }
          });
          
          // Filter items
          items.forEach(item => {
            if (selectedValue === 'all' || item.dataset.category === selectedValue) {
              item.classList.remove('hidden');
            } else {
              item.classList.add('hidden');
            }
          });
        });
      });
      
      // Reset button handler
      resetButton.addEventListener('click', function() {
        const allRadio = document.querySelector('.filter-radio[value="all"]');
        allRadio.checked = true;
        allRadio.dispatchEvent(new Event('change'));
      });
    });
  </script>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">View Options</h3>
    
    <form class="flex flex-wrap gap-2 items-center">
      <input 
        type="reset" 
        value="×" 
        class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
        
      <label class="relative">
        <input type="radio" name="view" value="grid" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
          </svg>
          Grid
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="view" value="list" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          List
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="view" value="columns" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
          </svg>
          Columns
        </span>
      </label>
    </form>

    <div class="mt-8">
      <h3 class="text-lg font-medium text-gray-700 mb-4">Filter by Status</h3>
      
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="status" value="active" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-green-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-green-500"></span>
            Active
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="pending" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-yellow-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
            Pending
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="completed" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-blue-500"></span>
            Completed
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="cancelled" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-red-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-red-500"></span>
            Cancelled
          </span>
        </label>
      </form>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">Vertical Filter</h3>
    
    <form class="flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
          
        <h4 class="text-sm font-medium text-gray-600">Categories</h4>
      </div>
      
      <div class="flex flex-col space-y-2 pl-1">
        <label class="relative flex items-center">
          <input type="radio" name="category" value="all" class="absolute opacity-0 peer" checked />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-blue-500 text-white cursor-pointer hover:bg-blue-600 transition">
            All Categories
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="category" value="electronics" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Electronics
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="category" value="clothing" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Clothing
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="category" value="books" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Books
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="category" value="home" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Home & Garden
          </span>
        </label>
      </div>
      
      <div class="flex items-center gap-2 mt-4">
        <h4 class="text-sm font-medium text-gray-600">Price Range</h4>
      </div>
      
      <div class="flex flex-col space-y-2 pl-1">
        <label class="relative flex items-center">
          <input type="radio" name="price" value="all" class="absolute opacity-0 peer" checked />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-blue-500 text-white cursor-pointer hover:bg-blue-600 transition">
            All Prices
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="price" value="budget" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Under $25
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="price" value="mid" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            $25 - $100
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="price" value="premium" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            $100 - $500
          </span>
        </label>
        
        <label class="relative flex items-center">
          <input type="radio" name="price" value="luxury" class="absolute opacity-0 peer" />
          <span class="w-full inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            $500+
          </span>
        </label>
      </div>
    </form>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-2xl mx-auto space-y-10">
    <!-- Extra Small Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 mb-2">Extra Small</h3>
      <form class="flex flex-wrap gap-1.5 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-6 h-6 text-xs rounded bg-gray-100 flex items-center justify-center cursor-pointer hover:bg-gray-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="xs-filter" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-2 py-1 text-xs rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="xs-filter" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-2 py-1 text-xs rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="xs-filter" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-2 py-1 text-xs rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Small Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 mb-2">Small</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-7 h-7 text-sm rounded bg-gray-100 flex items-center justify-center cursor-pointer hover:bg-gray-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="sm-filter" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-3 py-1.5 text-sm rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="sm-filter" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-3 py-1.5 text-sm rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="sm-filter" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-3 py-1.5 text-sm rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Medium Filter (Default) -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 mb-2">Medium (Default)</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-9 h-9 rounded bg-gray-100 flex items-center justify-center cursor-pointer hover:bg-gray-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="md-filter" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="md-filter" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="md-filter" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-4 py-2 rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
    
    <!-- Large Filter -->
    <div>
      <h3 class="text-sm font-medium text-gray-700 mb-2">Large</h3>
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-10 h-10 text-lg rounded bg-gray-100 flex items-center justify-center cursor-pointer hover:bg-gray-200 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="lg-filter" value="option1" class="absolute opacity-0 peer" />
          <span class="inline-flex px-5 py-2.5 text-base rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 1
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="lg-filter" value="option2" class="absolute opacity-0 peer" />
          <span class="inline-flex px-5 py-2.5 text-base rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 2
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="lg-filter" value="option3" class="absolute opacity-0 peer" />
          <span class="inline-flex px-5 py-2.5 text-base rounded bg-gray-100 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            Option 3
          </span>
        </label>
      </form>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">Pill Style Filter</h3>
    
    <form class="flex flex-wrap gap-2 items-center">
      <input 
        type="reset" 
        value="×" 
        class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
        
      <label class="relative">
        <input type="radio" name="tags" value="all" class="absolute opacity-0 peer" checked />
        <span class="inline-flex px-6 py-2 rounded-full bg-blue-500 text-white cursor-pointer hover:bg-blue-600 transition">
          All
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="tags" value="design" class="absolute opacity-0 peer" />
        <span class="inline-flex px-6 py-2 rounded-full bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Design
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="tags" value="branding" class="absolute opacity-0 peer" />
        <span class="inline-flex px-6 py-2 rounded-full bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Branding
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="tags" value="development" class="absolute opacity-0 peer" />
        <span class="inline-flex px-6 py-2 rounded-full bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Development
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="tags" value="marketing" class="absolute opacity-0 peer" />
        <span class="inline-flex px-6 py-2 rounded-full bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Marketing
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="tags" value="strategy" class="absolute opacity-0 peer" />
        <span class="inline-flex px-6 py-2 rounded-full bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Strategy
        </span>
      </label>
    </form>
    
    <div class="mt-8">
      <h4 class="text-sm font-medium text-gray-500 mb-3">Color Filters</h4>
      
      <form class="flex flex-wrap gap-3 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="colors" value="red" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-red-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-red-500 hover:opacity-90 transition"></span>
        </label>
        
        <label class="relative">
          <input type="radio" name="colors" value="blue" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-blue-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500 hover:opacity-90 transition"></span>
        </label>
        
        <label class="relative">
          <input type="radio" name="colors" value="green" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-green-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-green-500 hover:opacity-90 transition"></span>
        </label>
        
        <label class="relative">
          <input type="radio" name="colors" value="yellow" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-yellow-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-yellow-500 hover:opacity-90 transition"></span>
        </label>
        
        <label class="relative">
          <input type="radio" name="colors" value="purple" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-purple-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-purple-500 hover:opacity-90 transition"></span>
        </label>
        
        <label class="relative">
          <input type="radio" name="colors" value="gray" class="absolute opacity-0 peer" />
          <span class="inline-flex w-8 h-8 rounded-full bg-gray-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500 hover:opacity-90 transition"></span>
        </label>
      </form>
    </div>
  </div>
</section> 
                        

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">Filter Frameworks</h3>
    
    <form class="flex flex-wrap gap-2 items-center">
      <input 
        type="reset" 
        value="×" 
        class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
        
      <label class="relative">
        <input type="radio" name="frameworks" value="svelte" class="absolute opacity-0 peer" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Svelte
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="vue" class="absolute opacity-0 peer" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Vue
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="react" class="absolute opacity-0 peer" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          React
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="angular" class="absolute opacity-0 peer" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          Angular
        </span>
      </label>
    </form>
  </div>
</section>