Composant Filtres
Composant de filtres simple conçu pour un blog ou un site Web de consommation de contenu, suivant une interface utilisateur en mode sombre avec un schéma de couleurs monochromatique. Il présente une mise en page réactive avec un minimum d’éléments.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
<h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
<div class="mb-4">
<label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
<select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>Technology</option>
<option>Health</option>
<option>Lifestyle</option>
<option>Travel</option>
</select>
</div>
<div class="mb-4">
<label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
<select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>John Doe</option>
<option>Jane Smith</option>
<option>Chris Johnson</option>
</select>
</div>
<div class="mb-4">
<label class="text-gray-300 dark:text-gray-400">Sort By</label>
<div class="flex space-x-4 mt-1">
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
<span class="ml-2 text-white">Latest</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
<span class="ml-2 text-white">Popular</span>
</label>
</div>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">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 Glassmorphism
Glassmorphism Filters Component pour les médias sociaux avec un design réactif et la prise en charge du thème sombre.
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.