Componente de información sobre herramientas
Un componente de información sobre herramientas simple y receptivo diseñado para el consumo de contenido de blog, con un diseño 3D con un esquema de color en escala de grises y soporte para el modo oscuro mediante Tailwind CSS.
Código HTML
<div class="relative group">
<!-- Tooltip Trigger -->
<button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
<!-- Tooltip -->
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
<div class="p-2">
<p>This is a tooltip with 3D styling!</p>
</div>
<div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
</div>
</div>
Componentes relacionados
Componente de información sobre herramientas
Un componente de información sobre herramientas de diseño de materiales receptivo con esquema de color monocromático para comercio electrónico, con soporte para modo oscuro. No solo JavaScript, HTML y Tailwind CSS.
Información sobre herramientas minimalista
Un componente de información sobre herramientas simple y minimalista con soporte para temas oscuros y efectos responsivos, creado con Tailwind CSS. No se utiliza JavaScript, solo HTML y CSS.
Componente de descripción emergente esqueuomórfico
Un componente complejo de información sobre herramientas diseñado con un estilo esqueuomórfico y tonos tierra, adecuado para aplicaciones de comercio electrónico con soporte para modo oscuro.