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.
Codice HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-white mb-4">Filters</h2>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
<input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
<input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
<input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
<select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
<option class="bg-gray-700 dark:bg-gray-800">All</option>
<option class="bg-gray-700 dark:bg-gray-800">Active</option>
<option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
<select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
<option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
<option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
<option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
</select>
</div>
</div>
<button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>Componenti correlati
FiltriComponente
Un componente di filtri reattivo progettato in stile Material Design per applicazioni di e-commerce con supporto per temi scuri. Include più elementi interattivi per un'esperienza di acquisto migliorata.
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.
Componente Filtri
Un componente di filtro minimalista con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.