Composants Filtres Composant Filtres

Composant Filtres

Un composant de filtres simple et réactif pour les médias sociaux avec un style de micro-interactions, une palette de couleurs analogues et une prise en charge du thème sombre.

Aperçu

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>

Composants associés

BrutalisteFiltresComposant

Un composant de filtres de style brutaliste avec un contraste élevé, une typographie audacieuse et un espacement inhabituel. Il comprend des cases à cocher, des boutons radio et un curseur de gamme de prix. Les effets réactifs sont obtenus grâce à des requêtes multimédias et à des unités fluides. Le mode sombre est pris en charge via CSS.

Ouvrir