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 simple y receptivo con soporte para modo oscuro, que utiliza un esquema de color triádico adecuado para una cartera.
Componente de insignias
Componente de insignias elegante y receptivo para documentación o sitios wiki, con un esquema de color en tonos tierra, tipografía de lujo y soporte completo para el modo oscuro.
3D_Badge_Component
Un componente de insignia simple y receptivo inspirado en 3D para blog/contenido, con colores de alto contraste y soporte para modo oscuro.