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
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.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Ce composant utilise Tailwind CSS pour le style et inclut des images et des avatars aléatoires.
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.