FiltresComposant
Un composant de filtres réactif conçu dans le style Material Design pour les applications de commerce électronique avec une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs pour une expérience d’achat améliorée.
HTML Code
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
<ul class="mt-2">
<li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
<li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
<li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
<li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
<input type="range" class="w-full" min="0" max="1000" step="10" value="500">
<div class="flex justify-between text-gray-700 dark:text-gray-300">
<span>$0</span>
<span>$1000</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
<ul class="mt-2">
<li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
<li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
<li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
<ul class="mt-2">
<li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
<li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
<li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
</ul>
</div>
</div>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>Composants associés
Composant Filtres
Un composant de filtres de style skeuomorphe conçu pour les tableaux de bord avec une palette de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre.
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.
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.