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.
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.
Componente de información sobre herramientas
Un componente de información sobre herramientas complejo, receptivo, compatible con temas oscuros, Skeuomorphic-Vibrant para paneles que usan Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y randomuser.me.