RetroBadge

Componente badge retrò / vintage per siti Web aziendali / aziendali con combinazione di colori complementari. Layout semplice, design reattivo con supporto per temi scuri. Niente JavaScript.

Anteprima

Codice HTML

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

Componenti correlati

Componente Badge

Un componente di badge a tema retrò con una combinazione di colori in scala di grigi, adatto per un blog o un sito di contenuti. È dotato di più elementi interattivi e piena reattività, con supporto per la modalità oscura. Il design evita JavaScript, basandosi esclusivamente su HTML e Tailwind CSS.

Aperto

Componente Badge

Un componente di badge reattivo progettato per le interfacce dei social media, caratterizzato da microinterazioni coinvolgenti e una combinazione di colori complementari, che supporta la modalità scura.

Aperto

Componente Badge - Modalità scura Toni della terra

Un complesso sistema di componenti per badge progettato con i toni della terra per un'interfaccia blog/contenuto in modalità oscura. Il componente include vari tipi di badge per categorie di articoli, stato utente, tag di contenuto, notifiche e indicatori di risultato. Il tutto utilizzando colori naturali della terra con supporto per la modalità scura. Il design è completamente reattivo e si adatta alle diverse dimensioni dello schermo.

Aperto