Komponente "Filter"
Eine reaktionsschnelle Filterkomponente, die für die Benutzeroberfläche im Dunkelmodus mit Tailwind CSS entwickelt wurde. Es enthält Optionen zum Filtern von Inhalten, verwendet dunkle Hintergründe und spart Akkulaufzeit.
HTML-Code
<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>Verwandte Komponenten
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente für den E-Commerce mit ansprechenden Mikrointeraktionen und einem triadischen Farbschema, das den Dunkelmodus unterstützt.
Glassmorphism_EarthTones_SocialMedia_Filters
Eine komplexe, reaktionsschnelle Social-Media-Filterkomponente mit einem Glasmorphismus-Design, einem erdfarbenen Farbschema und vollständiger Unterstützung des Dunkelmodus. Verfügt über durchscheinende Elemente aus Milchglas-ähnlichem mit Unschärfeeffekten, semantischem HTML und interaktiven Filteroptionen.
Komponente "Filter"
Eine brutalistische Filterkomponente mit Tailwind CSS mit responsivem Design, Unterstützung für dunkle Themen und Platzhaltern für Bilder und Avatare.