FiltriComponenteNeumorfismo
Un semplice componente di filtri reattivi con interfaccia utente morbida per il neumorfismo, che utilizza una combinazione di colori in scala di grigi, progettato per siti Web aziendali/aziendali. Il componente supporta la modalità oscura ed è costruito con Tailwind CSS senza alcun JavaScript.
Codice HTML
<!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
aria-label="Filter section"
class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
<!-- Search Input -->
<div class="flex-1">
<label for="filter-search" class="sr-only">Search</label>
<input
type="text"
id="filter-search"
placeholder="Search..."
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
/>
</div>
<!-- Category Select -->
<div class="flex-1">
<label for="filter-category" class="sr-only">Category</label>
<select
id="filter-category"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Categories</option>
<option>Marketing</option>
<option>Finance</option>
<option>HR</option>
</select>
</div>
<!-- Status Select -->
<div class="flex-1">
<label for="filter-status" class="sr-only">Status</label>
<select
id="filter-status"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
<!-- Apply Button -->
<div>
<button
type="button"
class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
Apply Filters
</button>
</div>
</section>
Componenti correlati
Componente Filtri
Un componente di filtri complesso e reattivo con elementi di design 3D e una combinazione di colori triadica, adatto per blog/siti Web di contenuti. Supporta il tema scuro.
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.
Componente Filtri
Un componente Filtri progettato con uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Questo componente utilizza Tailwind CSS per lo stile e include immagini segnaposto e avatar casuali.