Filter Vertical

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