Componentes Insignias Componente de insignias

Componente de insignias

Un componente de insignias responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS. Este componente incluye efectos de desplazamiento y utiliza imágenes de marcador de posición para avatares.

Vista previa

Código HTML

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

Componentes relacionados

Componente de insignias

Un componente de insignias responsivo diseñado con microinteracciones, con un esquema de color complementario y compatibilidad con temas oscuros. Ideal para sitios web empresariales y corporativos, este componente incluye animaciones atractivas que responden a las acciones del usuario. Las señales visuales mencionadas anteriormente, como los efectos de desplazamiento, mejoran la experiencia del usuario.

Abrir

Insignias de neumorfismo

Se trata de un componente de insignias de estilo Neumorphism con un esquema de color pastel, diseñado para un portafolio y que utiliza Tailwind CSS.

Abrir

Componente de insignias

Componente de insignias con soporte de tema oscuro receptivo para comercio electrónico.

Abrir