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 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 avec des micro-interactions, des animations attrayantes et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Retro_Vintage_Earth_Tones_Filters_Component
Un composant de filtres de complexité modérée avec une esthétique rétro/vintage et des tons de terre, adapté à un tableau de bord. Dispose d’un design réactif et d’une prise en charge du mode sombre.