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 Glassmorphism
Componente Glassmorphism Filters per Social Media con design reattivo e supporto per temi scuri.
Componente Filtri
Un componente di filtri complesso e reattivo per una dashboard, caratterizzato da un design pulito e minimalista con una combinazione di colori neon/elettrico, che supporta più elementi interattivi e la modalità scura. Progettato per la visualizzazione dei dati e i pannelli di controllo.
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.