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 estilo Skeuomorphism, combinación de colores triádica y complejidad simple, diseñado para carteras con soporte para temas oscuros.
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.
Insignias skeuomórficas
Un conjunto de insignias con un diseño esqueuomórfico, una combinación de colores complementaria y un diseño simple, adecuado para un blog o un sitio de contenido. Responsivo con soporte para modo oscuro.