Composant Badges
Un composant de badges réactifs conçu avec un style 3D utilisant des tons Terre, avec des éléments interactifs adaptés à un tableau de bord.
HTML Code
<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>Composants associés
Composant Badges
Un composant de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.
Composant Badges
Composant Badges avec prise en charge du thème sombre réactif pour le commerce électronique.
Composant Badges
Un composant de badges minimaliste pour les tableaux de bord, avec des tons de terre et la prise en charge du mode sombre.