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
Composant Filtres
Un composant de filtres complexe et réactif avec des éléments de conception 3D et une palette de couleurs triadique, adapté aux sites de blogs/sites de contenu. Prend en charge le thème sombre.
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
Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.