Componente de insignias
Un componente simple de insignias de estilo Glassmorphism para redes sociales, con efectos de vidrio esmerilado con desenfoque, colores análogos y soporte de modo oscuro usando Tailwind CSS. Es responsivo y usa picsum.photos para imágenes y randomuser.me para avatares cuando sea necesario. No se incluye JavaScript.
Código HTML
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Componentes relacionados
Componente de insignias
Un componente de insignias responsivo diseñado con un estilo 3D utilizando tonos Tierra, con elementos interactivos adecuados para un tablero.
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.
Componente de insignias - Modo oscuro Tonos tierra
Un complejo sistema de componentes de insignias diseñado con tonos tierra para una interfaz de blog/contenido en modo oscuro. El componente incluye varios tipos de insignias para categorías de artículos, estado de usuario, etiquetas de contenido, notificaciones e indicadores de logro. Todo ello utilizando colores naturales en tono tierra con soporte para el modo oscuro. El diseño es totalmente responsivo y se adapta a diferentes tamaños de pantalla.