Componente Badge
Un componente Badge semplice e reattivo progettato con un'estetica 3D e una combinazione di colori complementari per il consumo di blog e contenuti. Supporta la modalità oscura.
Codice HTML
<div class="flex flex-wrap p-5 justify-center">
<div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 1</span>
</div>
<p class="text-sm mt-2">This is a description for badge 1.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 2</span>
</div>
<p class="text-sm mt-2">This is a description for badge 2.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 3</span>
</div>
<p class="text-sm mt-2">This is a description for badge 3.</p>
</div>
</div>Componenti correlati
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.
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.
Componente Badge
Un versatile componente Badge progettato per siti Web aziendali/aziendali, che utilizza i toni della Terra in un'interfaccia utente in modalità scura per migliorare l'esperienza dell'utente. Il componente è caratterizzato da reattività con alcuni elementi interattivi.