Componente della descrizione comando
Un semplice componente Tooltip reattivo progettato per il consumo di contenuti di blog, caratterizzato da un design 3D con una combinazione di colori in scala di grigi e supporto per la modalità oscura utilizzando Tailwind CSS.
Codice 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>
Componenti correlati
Tooltip minimalista
Un componente tooltip semplice e minimalista con supporto per il tema scuro ed effetti reattivi, creato utilizzando Tailwind CSS. Non viene utilizzato JavaScript, solo HTML e CSS.
Componente della descrizione comando
Un componente di descrizione comando reattivo a tema scuro, parte di una combinazione di colori Triadic, adatto per un portfolio. Costruito con Tailwind CSS per un'estetica semplice e minimale.