Componentes Insignias Componente de insignias

Componente de insignias

Un componente de insignias responsivo con microinteracciones atractivas, diseñado con Tailwind CSS. Admite el modo oscuro e incluye marcadores de posición de imagen.

Vista previa

Código HTML

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

Componentes relacionados

Componente de insignias

Un componente de insignias versátil diseñado para sitios web comerciales / corporativos, que utiliza tonos tierra en una interfaz de usuario de modo oscuro para mejorar la experiencia del usuario. El componente presenta capacidad de respuesta con algunos elementos interactivos.

Abrir

Componente de insignias - Panel de control análogo 3D

Un componente de insignias receptivo con diseño 3D, combinación de colores análoga, complejidad moderada y soporte de temas oscuros para paneles. Solo utiliza clases CSS de Tailwind.

Abrir

Componente de insignias

Un componente de insignias neumórficas con un esquema de color análogo para un sitio web de blog/contenido. Cuenta con un diseño responsivo y soporte para temas oscuros, utilizando solo HTML y Tailwind CSS.

Abrir