Componentes Insignias Componente de insignias

Componente de insignias

Un componente de insignias responsivas con estilo Material Design, soporte de tema oscuro y combinación de colores de tonos tierra para el contenido del blog.

Vista previa

Código HTML

<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
    <div class="m-4">
        <div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Author: John Doe</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Category: Nature</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Tag: Environment</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Contributor: Jane Smith</span>
        </div>
    </div>
</div>

Componentes relacionados

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 simple de insignias de estilo Glassmorphism para redes sociales, con efectos de vidrio esmerilado con desenfoque, colores análogos y soporte de modo oscuro usando Tailwind CSS. Es responsivo y usa picsum.photos para imágenes y randomuser.me para avatares cuando sea necesario. No se incluye JavaScript.

Abrir

Componente de insignias financieras

Un componente de insignias financieras de diseño minimalista y plano que utiliza tonos océano/azul, adecuado para interfaces financieras y bancarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro.

Abrir