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
Un componente di filtri complesso, reattivo, in stile Glassmorphism con una combinazione di colori analoga per siti Web aziendali/aziendali. Presenta elementi traslucidi ed effetti di sfocatura, con supporto completo della modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Componente Filtri
Un componente di filtri complesso e reattivo con elementi di design 3D e una combinazione di colori triadica, adatto per blog/siti Web di contenuti. Supporta il tema scuro.
Filtri eventi neumorfici
Un componente di filtro neumorfico semplice e reattivo che utilizza toni caldi del tramonto per siti Web di eventi e conferenze, con supporto per la modalità scura.