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 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.
Composant Filtres de forum
Un composant de filtres de forum réactif avec une esthétique de conception 3D, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux plateformes communautaires.
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.