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 reattivo progettato con uno stile glassmorphism, con colori pastello e supporto per la modalità scura, rivolto a siti web aziendali/aziendali.
Componente Filtri
Un componente di filtri complesso e reattivo con elementi di design 3D e una combinazione di colori triadica, adatto per blog/siti Web di contenuti. Supporta il tema scuro.
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.