Información sobre herramientas de pastel minimalista
Un componente de información sobre herramientas mínimo y plano diseñado para sitios web comerciales y corporativos con colores pastel, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Código HTML
<div class="relative inline-block">
<button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
<div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
Tooltip text
</div>
</div>Componentes relacionados
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.
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.
3D_Real_Estate_Tooltip
Un componente de información sobre herramientas moderadamente complejo y receptivo con elementos de diseño 3D y un esquema de color cálido al atardecer, adecuado para listados de propiedades inmobiliarias. Incluye soporte para modo oscuro.