Componente della descrizione comando
Un componente di descrizione comando reattivo con microinterazioni per il coinvolgimento dell'utente, con un tema scuro e animazioni accattivanti.
Codice HTML
<div class="relative group">
<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
Hover me
</button>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span class="font-semibold">John Doe</span>
</div>
<div>
<p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
</div>
<img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
</div>
</div>
</div>
<!-- Dark mode support -->
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1f2937;
}
.border-gray-700 {
border-color: #374151;
}
}
</style>Componenti correlati
Componente della descrizione comando
Un componente Tooltip reattivo progettato con microinterazioni, combinazione di colori triadica e supporta la modalità oscura per siti Web aziendali/aziendali professionali. Include animazioni accattivanti, un'interfaccia ricca di elementi interattivi e utilizza Tailwind CSS per lo stile.
Paper_Rainbow_Tooltip_Component
Un componente di descrizione comando semplice e reattivo con un design ispirato alla carta/stampa e uno sfondo sfumato arcobaleno, adatto per piattaforme di forum/community. Include il supporto per la modalità oscura.
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.