BrutalistesFiltres
Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Filtres
Un composant de filtres de style skeuomorphe conçu pour les tableaux de bord avec une palette de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre.
Composant Filtres
Un composant de filtres sophistiqué conçu avec Glassmorphism et une palette de couleurs analogue, adapté à la visualisation des données du tableau de bord avec prise en charge du thème sombre.
Composant Filtres
Un composant de filtres complexe et réactif avec des éléments de conception 3D et une palette de couleurs triadique, adapté aux sites de blogs/sites de contenu. Prend en charge le thème sombre.