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
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 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 brutalistes avec Tailwind CSS, avec un design réactif, la prise en charge des thèmes sombres et des espaces réservés pour les images et les avatars.