Componente Filtri
Un componente Filtri reattivo con microinterazioni, animazioni accattivanti e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out" />
</div>
<div class="relative">
<select class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out">
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Apply</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-150 ease-in-out">Reset</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 1</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 2</p>
</div>
</div>
</div>
</div>Componenti correlati
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 di filtri progettato con uno stile scheumorfico che imita i controlli del mondo reale, utilizzando una combinazione di colori in scala di grigi, perfetta per dashboard con elementi interattivi complessi.
Memphis_Job_Filters
Un componente di filtro di lavoro reattivo con uno stile di design Memphis giocoso, una combinazione di colori triadica e il supporto della modalità scura, adatto per bacheche di lavoro e piattaforme di carriera.