BrutalistaFiltri
Un componente di filtro semplice e brutalista per applicazioni di social media, con una combinazione di colori complementare e il supporto della modalità scura.
Codice HTML
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between border-2 border-black dark:border-white p-4">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4 md:mb-0">Filters</h2>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-blue-500 text-white font-bold border-2 border-black dark:border-white hover:bg-blue-700 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-700 transition duration-300">Latest</button>
<button class="px-4 py-2 bg-red-500 text-white font-bold border-2 border-black dark:border-white hover:bg-red-700 dark:bg-green-500 dark:text-black dark:hover:bg-green-700 transition duration-300">Popular</button>
<button class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black dark:border-white hover:bg-green-700 dark:bg-red-500 dark:text-black dark:hover:bg-red-700 transition duration-300">Friends</button>
<button class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black dark:border-white hover:bg-yellow-700 dark:bg-blue-500 dark:text-black dark:hover:bg-blue-700 transition duration-300">Following</button>
</div>
</div>
</div>Componenti correlati
Componente Filtri
Un componente di filtri reattivi per l'e-commerce con microinterazioni coinvolgenti e una combinazione di colori triadica, che supporta la modalità scura.
Componente Filtri
Un componente Filtri reattivo con design retrò / vintage, che supporta il tema scuro con Tailwind CSS.
FiltriComponenteNeumorfismo
Un semplice componente di filtri reattivi con interfaccia utente morbida per il neumorfismo, che utilizza una combinazione di colori in scala di grigi, progettato per siti Web aziendali/aziendali. Il componente supporta la modalità oscura ed è costruito con Tailwind CSS senza alcun JavaScript.