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 responsivas con estilo Material Design, soporte de tema oscuro y combinación de colores de tonos tierra para el contenido del blog.
Componente de insignias
Componente de insignias con soporte de tema oscuro receptivo para comercio electrónico.
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.