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.
Código HTML
<div class="flex flex-wrap p-5 justify-center">
<div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 1</span>
</div>
<p class="text-sm mt-2">This is a description for badge 1.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 2</span>
</div>
<p class="text-sm mt-2">This is a description for badge 2.</p>
</div>
<div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="font-semibold">Badge 3</span>
</div>
<p class="text-sm mt-2">This is a description for badge 3.</p>
</div>
</div>Componentes relacionados
Memphis_Pastel_Food_Badges_Component
Un componente de insignias complejo y receptivo para sitios web de alimentos / restaurantes, inspirado en Memphis Design con una combinación de colores pastel. Presenta formas geométricas, patrones divertidos e incluye soporte para el modo oscuro.
Insignias pastel Interfaz de usuario de modo oscuro
Un componente de insignias simple y receptivo para sitios web comerciales, con una interfaz de usuario de modo oscuro con colores pastel. Diseñado con Tailwind CSS, utiliza un fondo oscuro para reducir la fatiga visual y admite un diseño responsivo.
DegradadoSepiaBadges
Un componente de insignia sensible específico para música/audio con transiciones de degradado sepia/marrón, adecuado para mostrar géneros, estados de ánimo o categorías de artistas. Incluye soporte para modo oscuro.