Información sobre herramientas de Glassmorphism
Un componente de información sobre herramientas diseñado con estilo glassmorphism, compatible con un tema oscuro y un diseño receptivo, adecuado para interfaces de redes sociales.
Código HTML
<div class="relative group inline-block">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
<span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
<span class="font-bold">Your Tooltip Title</span>
<p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
</span>
</div>Componentes relacionados
Componente de descripción emergente esqueuomórfico
Un componente de información sobre herramientas receptivo diseñado con skeuomorfismo y colores vibrantes, adecuado para blogs y consumo de contenido. Incluye soporte para temas oscuros usando Tailwind CSS.
Componente de información sobre herramientas de microinteracciones
Un componente de información sobre herramientas simple pero atractivo con sutiles animaciones de microinteracción, diseño receptivo y soporte de temas oscuros creado con Tailwind CSS. No se requiere JavaScript.
Componente de información sobre herramientas
Un componente de información sobre herramientas de diseño de materiales receptivo con esquema de color monocromático para comercio electrónico, con soporte para modo oscuro. No solo JavaScript, HTML y Tailwind CSS.