Componenti Filtri Componente Filtri

Componente Filtri

Un componente di filtri semplice e reattivo per i social media con uno stile di microinterazioni, una combinazione di colori analoga e il supporto di temi scuri.

Anteprima

Codice HTML

<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>

Componenti correlati

Retro_Vintage_Earth_Tones_Filters_Component

Un componente filtrante di moderata complessità con un'estetica retrò/vintage e toni della terra, adatto per un cruscotto. Presenta un design reattivo e il supporto per la modalità oscura.

Aperto

Componente Filtri

Un componente di filtri reattivi per l'e-commerce che incorpora lo stile della modalità scura con una combinazione di colori dei toni della terra.

Aperto

Componente Filtri

Un componente di filtri reattivo progettato in stile Brutalismo con una combinazione di colori in scala di grigi per un'impostazione del cruscotto. Include opzioni di filtro interattive e supporta il tema scuro.

Aperto