Komponente "Filter"
Eine einfache, reaktionsschnelle Filterkomponente für soziale Medien mit einem Mikrointeraktionsstil, einem analogen Farbschema und Unterstützung für dunkle Themen.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
<div class="container mx-auto">
<h2 class="text-xl font-bold mb-4">Filters</h2>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:scale-105">
Popular
</button>
<button class="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out transform hover:scale-105">
Latest
</button>
<button class="px-4 py-2 bg-yellow-500 text-white rounded-full hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:scale-105">
Following
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 transition duration-300 ease-in-out transform hover:scale-105">
Friends
</button>
</div>
</div>
</div>Verwandte Komponenten
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.
Komponente "Filter"
Eine brutalistische Filterkomponente mit Tailwind CSS mit responsivem Design, Unterstützung für dunkle Themen und Platzhaltern für Bilder und Avatare.
Komponente "Filter"
Eine Filterkomponente, die mit einem skeuomorphen Stil gestaltet wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Diese Komponente verwendet Tailwind CSS für das Styling und enthält zufällige Platzhalterbilder und Avatare.