Filter Sizes

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