Insignias Componente 48
Un componente de insignias diseñado con los principios de Material Design, con diseños responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
</div>
</div>
</div>Componentes relacionados
Componente de insignias
Un conjunto de insignias inspiradas en Material Design para aplicaciones de tecnología/SaaS, con un esquema de color en blanco y negro con un color de acento, diseño receptivo y compatibilidad con modo oscuro.
Componente de insignias - Panel de control análogo 3D
Un componente de insignias receptivo con diseño 3D, combinación de colores análoga, complejidad moderada y soporte de temas oscuros para paneles. Solo utiliza clases CSS de Tailwind.
Healthcare_Badges_Component_Bauhaus
Un componente de insignias de temática sanitaria con un diseño inspirado en la Bauhaus, utilizando tonos cálidos/atardeceres. Presenta formas geométricas y un diseño funcional, adecuado para mostrar el estado o las categorías en aplicaciones médicas. Responsivo con soporte para modo oscuro.