Componente de insignias
Un componente de insignias responsivo diseñado con un estilo 3D utilizando tonos Tierra, con elementos interactivos adecuados para un tablero.
Código 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>Componentes relacionados
Componente de insignias
Un componente de insignias responsivo con estilo Skeuomorphism, combinación de colores triádica y complejidad simple, diseñado para carteras con soporte para temas oscuros.
Componente de insignias
Un componente de insignias de temática retro con un esquema de color en escala de grises, adecuado para un blog o un sitio de contenido. Cuenta con múltiples elementos interactivos y una capacidad de respuesta completa, con soporte para modo oscuro. El diseño evita JavaScript, confiando únicamente en HTML y Tailwind CSS.
Componente de insignias
Un componente de insignias con estilo Neumorphism para blogs con un esquema de color análogo y una interfaz enriquecida.