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.
Codice HTML
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
<input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
<input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
<select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring 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 class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
<div class="flex items-center space-x-4 w-2/3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
</label>
</div>
</div>
<button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
</div>
</div>Componenti correlati
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 di filtri semplice e reattivo per i social media con uno stile di microinterazioni, una combinazione di colori analoga e il supporto di temi scuri.
Componente Filtri Forum
Un componente reattivo per i filtri del forum con un'estetica di design 3D, una combinazione di colori autunnali e il supporto per la modalità oscura, adatto per le piattaforme della community.