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 información sobre herramientas
Un componente de información sobre herramientas receptivo diseñado con microinteracciones, combinación de colores triádica y admite el modo oscuro para sitios web comerciales / corporativos profesionales. Incluye animaciones atractivas, una interfaz rica con elementos interactivos y utiliza Tailwind CSS para el estilo.
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
Un componente de información sobre herramientas neumórfico con un esquema de color complementario, complejidad moderada y diseño receptivo con soporte para temas oscuros, adecuado para un blog o consumo de contenido.