Información sobre herramientas neumórficas
Información sobre herramientas neumórficas para portafolio
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
<div class="relative flex items-center group">
<button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
Hover Me
</button>
<div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
This is a neumorphic tooltip!
<div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
</div>
</div>
</div>
Componentes relacionados
Glassmorphism Monocromático Simple Tooltip
Un componente de información sobre herramientas simple, receptivo y compatible con el modo oscuro con un esquema de color monocromático de estilo Glassmorphism para blogs y sitios de contenido.
Componente de información sobre herramientas
Un componente de descripción emergente con estilo Neumorphism para la presentación de carteras con soporte de modo oscuro, diseño receptivo y uso de Tailwind CSS.
Información sobre herramientas minimalista
Un componente de información sobre herramientas de diseño minimalista y plano para sitios web de blogs/contenido, con un esquema de color monocromático y un diseño simple. Es responsivo y admite el modo oscuro usando Tailwind CSS.