Filter Pill

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