Composant Filtres
Il s’agit d’un composant de filtres complexe et réactif avec un style de conception « Palette forêt/vert » et « Transitions dégradées/couleurs », adapté à un portefeuille. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-500">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-10 border border-green-200 dark:border-green-700 transition-all duration-500">
<h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-green-800 dark:from-emerald-400 dark:to-green-600 mb-8 sm:mb-10 text-center">
Browse Our Portfolio
</h2>
<!-- Filter Controls Section -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-10">
<!-- Category Filter -->
<div class="relative group">
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Category</label>
<select id="category" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
bg-no-repeat bg-right-center pr-10 cursor-pointer
bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
<option value="all" class="text-gray-700 dark:text-gray-300">All Categories</option>
<option value="web-design" class="text-gray-700 dark:text-gray-300">Web Design</option>
<option value="branding" class="text-gray-700 dark:text-gray-300">Branding</option>
<option value="marketing" class="text-gray-700 dark:text-gray-300">Marketing</option>
<option value="photography" class="text-gray-700 dark:text-gray-300">Photography</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
<svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Sort By Filter -->
<div class="relative group">
<label for="sortby" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Sort By</label>
<select id="sortby" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
bg-no-repeat bg-right-center pr-10 cursor-pointer
bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
<option value="newest" class="text-gray-700 dark:text-gray-300">Newest</option>
<option value="oldest" class="text-gray-700 dark:text-gray-300">Oldest</option>
<option value="popular" class="text-gray-700 dark:text-gray-300">Most Popular</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
<svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Search Input -->
<div class="relative col-span-full md:col-span-1 lg:col-span-2Composants associés
Composant Filtres
Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.
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.
BrutalisteFiltresComposant
Un composant de filtres de style brutaliste avec un contraste élevé, une typographie audacieuse et un espacement inhabituel. Il comprend des cases à cocher, des boutons radio et un curseur de gamme de prix. Les effets réactifs sont obtenus grâce à des requêtes multimédias et à des unités fluides. Le mode sombre est pris en charge via CSS.