Componente Badge
Un componente di badge reattivo con microinterazioni e supporto per temi scuri, progettato utilizzando Tailwind CSS. Questo componente include effetti al passaggio del mouse e utilizza immagini segnaposto per gli avatar.
Codice HTML
<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
<div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge One
</div>
<div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Two
</div>
<div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Three
</div>
<div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Four
</div>
<div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Five
</div>
</div>Componenti correlati
Componente Badge
Un componente Badge reattivo con stile Skeuomorphism, combinazione di colori triadici e complessità semplice, progettato per portfolio con supporto per temi scuri.
Componente Badge
Componente badge elegante e reattivo per la documentazione o i siti wiki, caratterizzato da una combinazione di colori dai toni della terra, una tipografia di lusso e il supporto completo della modalità scura.
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.