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
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.
Componente de insignias
Un componente de insignias receptivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, con soporte para el modo oscuro.
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.