Componente Filtri
Un componente Filtri reattivo con design retrò / vintage, che supporta il tema scuro con Tailwind CSS.
Codice HTML
<div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Filters</h2>
<div class="flex flex-col md:flex-row md:justify-around mb-4">
<div class="filter-item mb-4 md:mb-0">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
<select id="category" class="form-select block w-full px-3 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200">
<option>All</option>
<option>Electronics</option>
<option>Fashion</option>
<option>Home & Garden</option>
</select>
</div>
<div class="filter-item mb-4 md:mb-0">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="price">Price Range</label>
<input type="range" id="price" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50" />
</div>
</div>
<div class="flex flex-col md:flex-row md:justify-between mb-6">
<div class="filter-item mb-4 md:mb-0">
<label class="inline-flex items-center text-gray-700 dark:text-gray-300">
<input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
<span class="ml-2">In Stock</span>
</label>
</div>
<div class="filter-item mb-4 md:mb-0">
<label class="inline-flex items-center text-gray-700 dark:text-gray-300">
<input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
<span class="ml-2">Free Shipping</span>
</label>
</div>
</div>
<div class="text-center">
<button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200">Apply Filters</button>
</div>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Results</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
<h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 1</h4>
<img src="https://picsum.photos/200/150?random=1" alt="Item 1" class="rounded-md w-full" />
<p class="text-gray-600 dark:text-gray-300">Description of item 1.</p>
<div class="text-right mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold">$49.99</span>
</div>
</div>
<div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
<h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 2</h4>
<img src="https://picsum.photos/200/150?random=2" alt="Item 2" class="rounded-md w-full" />
<p class="text-gray-600 dark:text-gray-300">Description of item 2.</p>
<div class="text-right mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold">$29.99</span>
</div>
</div>
<div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
<h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 3</h4>
<img src="https://picsum.photos/200/150?random=3" alt="Item 3" class="rounded-md w-full" />
<p class="text-gray-600 dark:text-gray-300">Description of item 3.</p>
<div class="text-right mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold">$19.99</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
Componente Filtri
Un componente di filtri reattivi per l'e-commerce che incorpora lo stile della modalità scura con una combinazione di colori dei toni della terra.