Componente Filtri
Un componente Filtri reattivo progettato per l'interfaccia utente in modalità oscura utilizzando Tailwind CSS. Include opzioni per filtrare i contenuti, utilizza sfondi scuri e consente di risparmiare la durata della batteria.
Codice HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold mb-4">Filters</h2>
<form>
<div class="mb-4">
<label for="category" class="block text-sm font-medium mb-2">Category</label>
<select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
<option>All</option>
<option>Technology</option>
<option>Health</option>
<option>Education</option>
<option>Fashion</option>
</select>
</div>
<div class="mb-4">
<label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
<input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Rating</label>
<div class="flex space-x-1">
<input type="radio" id="star5" name="rating" value="5" class="hidden">
<label for="star5" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star4" name="rating" value="4" class="hidden">
<label for="star4" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star3" name="rating" value="3" class="hidden">
<label for="star3" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star2" name="rating" value="2" class="hidden">
<label for="star2" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star1" name="rating" value="1" class="hidden">
<label for="star1" class="cursor-pointer text-yellow-500">★</label>
</div>
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
</form>
<div class="mt-6">
<h3 class="text-lg font-semibold mb-2">Featured Items</h3>
<div class="grid grid-cols-1 gap-4">
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
Componente Filtri
Un componente di filtro per social media a tema retrò/vintage con toni della terra, layout semplice, design reattivo e supporto per la modalità oscura.