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.
Codice HTML
<div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<!-- Badge Example -->
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Name</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Another User</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Three</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Four</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Project One</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Project Two</span>
</div>
</div>Componenti correlati
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.
Badge pastello Interfaccia utente in modalità scura
Un componente di badge semplice e reattivo per i siti web aziendali, dotato di un'interfaccia utente in modalità scura con colori pastello. Progettato con Tailwind CSS, utilizza uno sfondo scuro per ridurre l'affaticamento degli occhi e supporta un layout reattivo.
Componente Badge
Un componente Badge reattivo progettato con microinterazioni, con una combinazione di colori complementari e il supporto del tema scuro. Ideale per siti web aziendali e aziendali, questo componente include animazioni coinvolgenti che rispondono alle azioni dell'utente. I segnali visivi menzionati in precedenza, come gli effetti al passaggio del mouse, migliorano l'esperienza dell'utente.