Componente Filtri
Un semplice componente Filtri progettato per un blog o un sito Web di consumo di contenuti, che segue un'interfaccia utente in modalità scura con una combinazione di colori monocromatica. Presenta un layout reattivo con elementi minimi.
Codice HTML
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
<h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
<div class="mb-4">
<label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
<select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>Technology</option>
<option>Health</option>
<option>Lifestyle</option>
<option>Travel</option>
</select>
</div>
<div class="mb-4">
<label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
<select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>John Doe</option>
<option>Jane Smith</option>
<option>Chris Johnson</option>
</select>
</div>
<div class="mb-4">
<label class="text-gray-300 dark:text-gray-400">Sort By</label>
<div class="flex space-x-4 mt-1">
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
<span class="ml-2 text-white">Latest</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
<span class="ml-2 text-white">Popular</span>
</label>
</div>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">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 Forum
Un componente reattivo per i filtri del forum con un'estetica di design 3D, una combinazione di colori autunnali e il supporto per la modalità oscura, adatto per le piattaforme della community.
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.