Componente Filtri
Un componente di filtri reattivi per l'e-commerce che incorpora lo stile della modalità scura con una combinazione di colori dei toni della terra.
Codice 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>Componenti correlati
Componente Filtri
Un componente di filtri reattivi per l'e-commerce con microinterazioni coinvolgenti e una combinazione di colori triadica, che supporta la modalità scura.
FiltriComponenteNeumorfismo
Un semplice componente di filtri reattivi con interfaccia utente morbida per il neumorfismo, che utilizza una combinazione di colori in scala di grigi, progettato per siti Web aziendali/aziendali. Il componente supporta la modalità oscura ed è costruito con Tailwind CSS senza alcun JavaScript.
Componente Filtri
Un componente Filtri progettato con uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Questo componente utilizza Tailwind CSS per lo stile e include immagini segnaposto e avatar casuali.