Componentes Insignias Componente de insignias

Componente de insignias

Un componente de insignias simple y receptivo diseñado con una estética 3D y un esquema de color complementario para el blog y el consumo de contenido. Soporta el modo oscuro.

Vista previa

Código HTML

<div class="flex flex-wrap p-5 justify-center">
    <div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 1</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 1.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 2</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 2.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 3</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 3.</p>
    </div>
</div>

Componentes relacionados

Componente de insignias

Un componente de insignias responsivo diseñado con un estilo 3D utilizando tonos Tierra, con elementos interactivos adecuados para un tablero.

Abrir

OrgánicoNaturalezaInspiradoInsignias

Un componente de insignias de complejidad moderada con líneas fluidas inspiradas en la naturaleza y una combinación de colores triádica, adecuada para un portafolio para exhibir trabajos o productos. Incluye capacidad de respuesta y soporte para el modo oscuro.

Abrir

Componente de insignias

Un componente de insignias neumórfico diseñado para el consumo de contenido de blog con elementos interactivos y diseño receptivo que admite el modo oscuro.

Abrir