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.
Código HTML
<div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
<div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<span class="font-semibold">Marketing Team</span>
</div>
<p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
</div>
<div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<span class="font-semibold">Sales Team</span>
</div>
<p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
</div>
<div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<span class="font-semibold">Product Team</span>
</div>
<p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
</div>
<div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<span class="font-semibold">Development Team</span>
</div>
<p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
</div>
</div>Componentes relacionados
Componente de insignias - Modo oscuro Tonos tierra
Un complejo sistema de componentes de insignias diseñado con tonos tierra para una interfaz de blog/contenido en modo oscuro. El componente incluye varios tipos de insignias para categorías de artículos, estado de usuario, etiquetas de contenido, notificaciones e indicadores de logro. Todo ello utilizando colores naturales en tono tierra con soporte para el modo oscuro. El diseño es totalmente responsivo y se adapta a diferentes tamaños de pantalla.
Componente de insignias
Un componente de insignias minimalista para tableros, con tonos tierra y soporte para modo oscuro.
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.