Glassmorphism_EarthTones_SocialMedia_Filters
Il s’agit d’un composant complexe et réactif de filtres pour les réseaux sociaux avec un design glassmorphism, une palette de couleurs terreuse et une prise en charge complète du mode sombre. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, du HTML sémantique et des options de filtre interactif.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-300 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8 flex items-start justify-center font-sans">
<div class="w-full max-w-4xl backdrop-blur-xl bg-white/30 dark:bg-stone-900/40 rounded-3xl shadow-xl border border-white/50 dark:border-stone-700/50 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-br from-stone-200/10 to-stone-400/10 dark:from-stone-700/10 dark:to-stone-900/10 rounded-3xl pointer-events-none"></div>
<div class="relative p-6 sm:p-8 lg:p-10">
<h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 text-center">
Explore Social Feeds
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<!-- Category Filter -->
<div class="flex flex-col">
<label for="category-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Category</label>
<div class="relative">
<select id="category-filter" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
<option value="all">All Posts</option>
<option value="news">News</option>
<option value="photos">Photos</option>
<option value="videos">Videos</option>
<option value="events">Events</option>
<option value="discussions">Discussions</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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>
</div>
<!-- People Filter -->
<div class="flex flex-col">
<label for="people-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">From People</label>
<div class="relative">
<input type="text" id="people-filter" placeholder="Search by name..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<!-- Location Filter -->
<div class="flex flex-col">
<label for="location-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Location</label>
<div class="relative">
<input type="text" id="location-filter" placeholder="Near me or a city..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
<div class="mt-8 sm:mt-10 grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Date Range Filter -->
<div class="flex flex-col">
<label for="date-start" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Start Date</label>
<input type="date" id="date-start" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
</div>
<div class="flex flex-col">
<label for="date-end" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">End Date</label>
<input type="date" id="date-end" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
</div>
<!-- Sort By Filter -->
<div class="flex flex-col col-span-2 md:col-span-1">
<label for="sort-by" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Sort By</label>
<div class="relative">
<select id="sort-by" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
<option value="recent">Most Recent</option>
<option value="popular">Most Popular</option>
<option value="relevance">Relevance</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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>
</div>
<!-- Filter Options Checkboxes -->
<div class="col-span-2 md:col-span-1 flex flex-col pt-2 md:pt-0">
<span class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Options</span>
<div class="flex flex-wrap gap-x-4 gap-y-2">
<label class="inline-flex items-center text-stone-700 dark:text-stone-300">
<input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
<span class="ml-2 text-sm">Followed</span>
</label>
<label class="inline-flex items-center text-stone-700 dark:text-stone-300">
<input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
<span class="ml-2 text-sm">Liked</span>
</label>
<label class="inline-flex items-center text-stone-700 dark:text-stone-300">
<input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
<span class="ml-2 text-sm">Comments</span>
</label>
</div>
</div>
</div>
<div class="mt-8 sm:mt-10 flex flex-col sm:flex-row gap-4 sm:gap-6">
<button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-white bg-stone-600 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-500/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
Apply Filters
</button>
<button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-stone-800 dark:text-stone-200 bg-white/60 dark:bg-stone-800/60 border border-white/70 dark:border-stone-700/70 hover:bg-white/80 dark:hover:bg-stone-700/80 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-300/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
Reset Filters
</button>
</div>
</div>
</div>
</div>Composants associés
Memphis_Job_Filters
Un composant de filtre d’emploi réactif avec un style de design Memphis ludique, une palette de couleurs triadique et une prise en charge du mode sombre, adapté aux sites d’emploi et aux plateformes de carrière.
Composant Filtres
Un composant de filtres complexe et réactif pour un tableau de bord, doté d’un design épuré et minimaliste avec une palette de couleurs néon/électrique, prenant en charge plusieurs éléments interactifs et le mode sombre. Conçu pour la visualisation de données et les panneaux de contrôle.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.