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
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.
RetroMedicalFiltersComponent
Un composant réactif de filtres de style rétro/vintage pour les applications de santé, avec des couleurs automnales et la prise en charge du mode sombre. Il comprend des options de filtre interactives pour les catégories, la plage de dates et le statut.
Composant Filtres Glassmorphism
Un composant de filtres simple et réactif de style Glassmorphism pour un portefeuille, avec des éléments translucides ressemblant à du verre dépoli avec des effets de flou, des couleurs complémentaires et la prise en charge du mode sombre.