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 filtre de médias sociaux à thème rétro/vintage avec des tons de terre, une mise en page simple, un design réactif et une prise en charge du mode sombre.
Composant Filtres de forum
Un composant de filtres de forum réactif avec une esthétique de conception 3D, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux plateformes communautaires.
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.