Componente de insignias
Un componente de insignias responsivas con estilo Material Design, soporte de tema oscuro y combinación de colores de tonos tierra para el contenido del blog.
Código HTML
<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
<div class="m-4">
<div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Author: John Doe</span>
</div>
</div>
<div class="m-4">
<div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Category: Nature</span>
</div>
</div>
<div class="m-4">
<div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Tag: Environment</span>
</div>
</div>
<div class="m-4">
<div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Contributor: Jane Smith</span>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.