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 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.
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 reattivo progettato in stile Brutalismo con una combinazione di colori in scala di grigi per un'impostazione del cruscotto. Include opzioni di filtro interattive e supporta il tema scuro.