Componente de información sobre herramientas
Un componente de descripción emergente de temática oscura receptivo, parte de un esquema de color triádico, adecuado para un portafolio. Construido con Tailwind CSS para una estética simple y minimalista.
Código HTML
<div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="group relative flex">
<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
<div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
<p>This is a triadic color scheme tooltip for your portfolio.</p>
<svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
</div>
</div>
</div>Componentes relacionados
Minimalist_Tooltip
Componente de información sobre herramientas de diseño minimalista / plano para comercio electrónico con diseño receptivo y soporte de tema oscuro. Utiliza un esquema de color complementario y tiene una complejidad moderada.
Información sobre herramientas retro
Un componente de información sobre herramientas simple y receptivo con estilo Retro / Vintage y combinación de colores en escala de grises, adecuado para sitios web comerciales. Admite tema oscuro.
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.