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.
Codice HTML
<div class="relative group">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
</div>
</div>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
<p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
<img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
</div>
<div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
</div>
</div>Componenti correlati
RetroTooltip
Un componente tooltip semplice e reattivo con stile Retrò/Vintage e combinazione di colori in scala di grigi, adatto per siti Web aziendali. Supporta il tema scuro.
Glassmorphism Tooltip
Un componente tooltip progettato con lo stile glassmorphism, che supporta il tema scuro e il design reattivo, adatto per le interfacce dei social media.
Componente della descrizione comando
Componente Tooltip con stile Skeuomorphism, Combinazione di colori complementari, Complessità semplice, per E-commerce.