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
Componente Filtri
Un componente Filtri reattivo con microinterazioni, animazioni accattivanti e supporto per temi scuri utilizzando Tailwind CSS.
Componente Filtri Glassmorphism
Componente Glassmorphism Filters per Social Media con design reattivo e supporto per temi scuri.
Glassmorphism_EarthTones_SocialMedia_Filters
Un componente di filtri per social media complesso e reattivo con un design glassmorphism, una combinazione di colori color terra e un supporto completo per la modalità scura. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, HTML semantico e opzioni di filtro interattivo.