Composant Filtres
Un composant de filtres minimaliste et réactif pour le commerce électronique, avec prise en charge du thème sombre. Il comprend des catégories, une gamme de prix et un filtre de couleur.
HTML Code
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Filter Products</h3>
<div class="mb-6">
<h4 class="text-md font-medium mb-2">Categories</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
</ul>
</div>
<div class="mb-6">
<h4 class="text-md font-medium mb-2">Price Range</h4>
<input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-sm mt-1">
<span>$0</span>
<span>$1000+</span>
</div>
</div>
<div class="mb-6">
<h4 class="text-md font-medium mb-2">Color</h4>
<div class="flex space-x-2">
<span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
<span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
<span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
</div>
</div>
<button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
Apply Filters
</button>
</div>Composants associés
Bauhaus_EarthTone_Agriculture_Filters_Component
Un composant de filtre complexe et réactif pour les sites Web agricoles, conçu dans un style Bauhaus avec des tons de terre. Comprend diverses options de filtrage telles que les catégories, la gamme de prix, les notes et les balises populaires, avec une prise en charge complète du mode sombre.
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.
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.