Composant Filtres
Un composant de filtres réactifs pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col p-6 space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Filters</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-lg text-gray-600 dark:text-gray-300">Category</span>
<div class="flex space-x-3">
<button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" aria-label="Select Electronics">Electronics</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300" aria-label="Select Clothing">Clothing</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-purple-600 rounded-lg hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300" aria-label="Select Home Goods">Home Goods</button>
</div>
</div>
<div>
<label class="block text-gray-600 dark:text-gray-300" for="price">Price Range</label>
<input type="range" min="0" max="100" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="price" aria-label="Price Range" />
</div>
<div>
<label class="block text-gray-600 dark:text-gray-300">Brand</label>
<select class="block w-full p-2 mt-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:border-gray-600 dark:focus:ring-blue-500" aria-label="Select Brand">
<option>Brand A</option>
<option>Brand B</option>
<option>Brand C</option>
</select>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300">Available Products:</p>
<div class="grid grid-cols-3 gap-4 mt-4">
<img src="https://picsum.photos/200/200" alt="Product Image 1" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
<img src="https://picsum.photos/200/200?random=1" alt="Product Image 2" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
<img src="https://picsum.photos/200/200?random=2" alt="Product Image 3" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
</div>
</div>
</div>
</div>Composants associés
Composant Filtres
Un composant de filtres réactif avec des éléments de conception 3D dans des tons terreux, adapté à un portfolio, avec prise en charge du thème sombre.
Composant Filtres
Un composant de filtres réactif conçu avec un style glassmorphism, avec des couleurs pastel et une prise en charge du mode sombre, destiné aux sites Web d’entreprise.
Composant Filtres
Un composant de filtres sophistiqué conçu avec Glassmorphism et une palette de couleurs analogue, adapté à la visualisation des données du tableau de bord avec prise en charge du thème sombre.