Componente Filtri
Un componente di filtri di stile scheumorfico progettato per dashboard con una combinazione di colori in scala di grigi e un design reattivo con supporto per temi scuri.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
<form class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
<input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
<select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
<option>All</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
<div class="flex items-center">
<label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
<input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
</div>
<button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
</form>
</div>Componenti correlati
Componente Filtri Glassmorphism
Componente Glassmorphism Filters per Social Media con design reattivo e supporto per temi scuri.
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.
Componente Filtri
Un componente di filtri reattivo progettato con uno stile glassmorphism, con colori pastello e supporto per la modalità scura, rivolto a siti web aziendali/aziendali.