Componente Badge
Un componente di badge reattivo progettato con uno stile 3D utilizzando i toni della Terra, con elementi interattivi adatti a una dashboard.
Codice HTML
<div class="flex flex-wrap gap-4 p-5">
<!-- Badge 1 -->
<div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
<p class="text-gray-600 dark:text-gray-400">1500</p>
</div>
<!-- Badge 2 -->
<div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
<p class="text-gray-600 dark:text-gray-400">300</p>
</div>
<!-- Badge 3 -->
<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
<p class="text-gray-600 dark:text-gray-400">$10,000</p>
</div>
<!-- Badge 4 -->
<div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
<p class="text-gray-600 dark:text-gray-400">250</p>
</div>
</div>Componenti correlati
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.
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.