Componente de insignias
Un componente de insignias responsivo con un diseño 3D, con profundidad y soporte para temas oscuros. Cada insignia representa a un usuario con un nombre, una imagen y una descripción, diseñados con Tailwind CSS.
Código HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
<!-- Badge 1 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
<p class="text-gray-600 dark:text-gray-400">Product Manager</p>
</div>
<!-- Badge 4 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
<p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
</div>
<!-- Badge 5 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
<p class="text-gray-600 dark:text-gray-400">Content Writer</p>
</div>
<!-- Badge 6 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>Componentes relacionados
Componente de insignias
Un componente de insignias responsivo con microinteracciones atractivas, diseñado con Tailwind CSS. Admite el modo oscuro e incluye marcadores de posición de imagen.
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.
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.