Glassmorphism_EarthTones_SocialMedia_Filters
Un componente di filtri per social media complesso e reattivo con un design glassmorphism, una combinazione di colori color terra e un supporto completo per la modalità scura. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, HTML semantico e opzioni di filtro interattivo.
Codice HTML
<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>Componenti correlati
Componente Filtri
Un componente di filtri reattivi per l'e-commerce che incorpora lo stile della modalità scura con una combinazione di colori dei toni della terra.
Componente Filtri
Un semplice componente Filtri progettato per un blog o un sito Web di consumo di contenuti, che segue un'interfaccia utente in modalità scura con una combinazione di colori monocromatica. Presenta un layout reattivo con elementi minimi.
Componente Filtri
Un componente Filtri reattivo progettato per l'interfaccia utente in modalità oscura utilizzando Tailwind CSS. Include opzioni per filtrare i contenuti, utilizza sfondi scuri e consente di risparmiare la durata della batteria.