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.
Código HTML
<div class="relative flex items-center group">
<button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
<div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
<span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
<svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
</div>
</div>Componentes relacionados
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.
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.
Componente de información sobre herramientas de Material Design - Reserva/Reserva
Un componente de información sobre herramientas complejo y receptivo inspirado en Material Design para sistemas de reservas, con colores apagados/desaturados, efectos de profundidad y compatibilidad con el modo oscuro. Proporciona información detallada al pasar el cursor por encima/enfocar.