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>
Copied to clipboard