Composant Filtres
Un composant de filtres réactifs pour le commerce électronique incorporant un style en mode sombre avec une palette de couleurs de tons de terre.
HTML Code
<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>Composants associés
Composant Filtres Glassmorphism
Un composant de filtres simple et réactif de style Glassmorphism pour un portefeuille, avec des éléments translucides ressemblant à du verre dépoli avec des effets de flou, des couleurs complémentaires et la prise en charge du mode sombre.
Composant Filtres de forum
Un composant de filtres de forum réactif avec une esthétique de conception 3D, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux plateformes communautaires.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.