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.
Codice HTML
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
<ul class="mt-2">
<li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
<li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
<li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
<li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
<input type="range" class="w-full" min="0" max="1000" step="10" value="500">
<div class="flex justify-between text-gray-700 dark:text-gray-300">
<span>$0</span>
<span>$1000</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
<ul class="mt-2">
<li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
<li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
<li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
<ul class="mt-2">
<li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
<li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
<li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
</ul>
</div>
</div>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>Componenti correlati
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.
BrutalistaFiltriComponente
Un componente di filtri in stile brutalista con contrasto elevato, tipografia audace e spaziatura insolita. Include caselle di controllo, pulsanti di opzione e un dispositivo di scorrimento della fascia di prezzo. Gli effetti reattivi si ottengono attraverso media query e unità fluide. La modalità oscura è supportata tramite 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.