Componente de filtros
Un componente de filtros complejo, receptivo y de estilo Glassmorphism con un esquema de color análogo para sitios web comerciales/corporativos. Cuenta con elementos translúcidos y efectos de desenfoque, con soporte completo para el modo oscuro usando Tailwind CSS. No se incluye JavaScript.
Código HTML
<div class="2xl:container 2xl:mx-auto">
<div class="py-12 px-4">
<div class="lg:flex justify-between">
<div class="lg:w-4/12">
<h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
<p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
<div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
<input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
</div>
<div class="mt-10">
<div class="flex flex-col space-y-4">
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">All Categories</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Electronics</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Fashion</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Home & Kitchen</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Books</span>
</label>
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
<div class="flex items-center justify-between mt-4">
<input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
<input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
</div>
<p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
<div class="flex flex-col space-y-4 mt-4">
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">5 Stars</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">4 Stars & Up</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">3 Stars & Up</span>
</label>
</div>
<button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
<button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
</div>
<div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
<div class="flex items-center justify-between">
<p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
<div class="flex items-center space-x-2">
<select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
<option value="popularity">Sort by Popularity</option>
<option value="price_asc">Price: Low to High</option>
<option value="price_desc">Price: High to Low</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
<!-- Product Card 1 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
<div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
New
</div>
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
<div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
Sale
</div>
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 9 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 10 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 11 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 12 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<nav aria-label="Pagination">
<ul class="flex">
<li>
<a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de filtros
Un componente de filtros responsivo para el comercio electrónico con microinteracciones atractivas y un esquema de color triádico, compatible con el modo oscuro.
Componente de filtros
Un componente de filtros diseñado con un estilo skeuomórfico, con efectos responsivos y compatibilidad con temas oscuros. Este componente utiliza Tailwind CSS para el estilo e incluye imágenes y avatares de marcador de posición aleatorios.
Componente de filtros
Un componente de filtros responsivos diseñado en estilo Brutalismo con un esquema de color en escala de grises para una configuración de tablero. Incluye opciones de filtro interactivo y admite el tema oscuro.