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
Badges pastel Mode sombre UI
Un composant de badges simple et réactif pour les sites Web d’entreprise, doté d’une interface utilisateur en mode sombre avec des couleurs pastel. Conçu avec Tailwind CSS, il utilise un fond sombre pour réduire la fatigue oculaire et prend en charge une mise en page réactive.
Insignes Skeuomorphes
Un composant Skeuomorphic Badges avec des effets réactifs et la prise en charge du thème sombre.
Composant Badges
Un composant de badges de style Neumorphism pour les blogs avec une palette de couleurs analogue et une interface riche.