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 complesso e reattivo con uno stile di design "Tavolozza/Verde" e "Transizioni sfumatura/colore", adatto per un portfolio. Include il supporto per la modalità oscura ed elementi interattivi.
Componente Filtri
Un componente Brutalist Filters con Tailwind CSS, caratterizzato da un design reattivo, supporto per temi scuri e segnaposto per immagini e avatar.
Filtri eventi neumorfici
Un componente di filtro neumorfico semplice e reattivo che utilizza toni caldi del tramonto per siti Web di eventi e conferenze, con supporto per la modalità scura.