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
Un composant de filtres réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.
FiltresComposantNeumorphisme
Un composant de filtres réactifs simple stylisé avec l’interface utilisateur logicielle Neumorphism, utilisant un schéma de couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Le composant prend en charge le mode sombre et est construit avec Tailwind CSS sans aucun JavaScript.
Composant Filtres
Un composant de filtres simple et réactif pour les médias sociaux avec un style de micro-interactions, une palette de couleurs analogues et une prise en charge du thème sombre.