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 réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.
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.
BrutalistesFiltres
Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.