Componente de filtros
Un componente de filtros responsivo para comercio electrónico que incorpora un estilo de modo oscuro con una combinación de colores en tonos tierra.
Código HTML
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold mb-4">Filter Products</h2>
<div class="mb-4">
<label class="block mb-2 font-medium">Category</label>
<select class="bg-gray-800 text-white border border-gray-700 rounded p-2">
<option>All Categories</option>
<option>Electronics</option>
<option>Fashion</option>
<option>Home & Garden</option>
<option>Sports</option>
</select>
</div>
<div class="mb-4">
<label class="block mb-2 font-medium">Price Range</label>
<input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded appearance-none focus:outline-none">
</div>
<div class="mb-4">
<label class="block mb-2 font-medium">Brand</label>
<div class="flex flex-wrap">
<div class="flex items-center mr-4">
<input type="checkbox" id="brand1" class="mr-2">
<label for="brand1" class="text-gray-300">Brand A</label>
</div>
<div class="flex items-center mr-4">
<input type="checkbox" id="brand2" class="mr-2">
<label for="brand2" class="text-gray-300">Brand B</label>
</div>
<div class="flex items-center mr-4">
<input type="checkbox" id="brand3" class="mr-2">
<label for="brand3" class="text-gray-300">Brand C</label>
</div>
</div>
</div>
<button class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Apply Filters</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 1</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$25.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 2</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$30.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 3</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$15.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Filtros brutalistas
Un componente de filtro simple y brutalista para aplicaciones de redes sociales, con un esquema de color complementario y soporte para modo oscuro.
Componente de filtros
Un componente de filtros brutalistas con CSS de Tailwind, con un diseño responsivo, compatibilidad con temas oscuros y marcadores de posición para imágenes y avatares.