Tooltip Neumorfico
Tooltip neumorfico per il portfolio
Codice 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>
Componenti correlati
Componente della descrizione comando
Un componente tooltip in stile Neumorfismo per la presentazione del portfolio con supporto per la modalità oscura, design reattivo e utilizzo di Tailwind CSS.
Componente del suggerimento retrò
Un componente di suggerimento a tema retrò/vintage con effetti reattivi e supporto per la modalità scura.
Descrizione comando del cruscotto skeuomorfo
Un componente di descrizione comando complesso e scheumorfico per una dashboard, caratterizzato da una combinazione di colori triadica e un design reattivo con supporto per la modalità scura, costruito con Tailwind CSS e senza JavaScript.