Composant Filtres
Un composant de filtre minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
<div class="flex flex-col space-y-2">
<div class="flex items-center justify-between">
<label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
<select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="all">All</option>
<option value="electronics">Electronics</option>
<option value="books">Books</option>
<option value="clothing">Clothing</option>
</select>
</div>
<div class="flex items-center justify-between">
<label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
<input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
</div>
<div class="flex items-center justify-between">
<label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
<select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="newest">Newest</option>
<option value="price-low-high">Price: Low to High</option>
<option value="price-high-low">Price: High to Low</option>
</select>
</div>
</div>
<button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</div>Composants associés
Composant Filtres
Un composant de filtres réactif avec des micro-interactions, des animations attrayantes et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant Filtres
Un composant de filtres sophistiqué conçu avec Glassmorphism et une palette de couleurs analogue, adapté à la visualisation des données du tableau de bord avec prise en charge du thème sombre.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.