Componente Filtri
Un componente di filtri reattivo progettato con uno stile glassmorphism, con colori pastello e supporto per la modalità scura, rivolto a siti web aziendali/aziendali.
Codice HTML
<div class="container mx-auto p-6">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filter Options</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
<select id="category" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>All</option>
<option>Consulting</option>
<option>Marketing</option>
<option>Development</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="location">Location</label>
<select id="location" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>Worldwide</option>
<option>Remote</option>
<option>On-site</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="date">Date</label>
<input type="date" id="date" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="price">Price</label>
<input type="text" id="price" placeholder="Max Price" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
</div>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500">Apply Filters</button>
</div>
</div>
Componenti correlati
FiltriComponenteNeumorfismo
Un semplice componente di filtri reattivi con interfaccia utente morbida per il neumorfismo, che utilizza una combinazione di colori in scala di grigi, progettato per siti Web aziendali/aziendali. Il componente supporta la modalità oscura ed è costruito con Tailwind CSS senza alcun JavaScript.
Componente Filtri
Un componente di filtro minimalista con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
BrutalistaFiltri
Un componente di filtro semplice e brutalista per applicazioni di social media, con una combinazione di colori complementare e il supporto della modalità scura.