Componente Messaggi di successo
Un componente per i messaggi di successo in stile 3D Design con effetti reattivi e supporto per temi scuri, con segnaposto per immagini e avatar.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
</div>
</div>
<div class="mt-4 space-x-2">
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a>
</div>
</div>
</div>Componenti correlati
Componente Messaggi di successo
Un componente reattivo che visualizza i messaggi di successo in uno stile minimalista, adatto per mostrare lavori o prodotti con supporto per temi scuri.
Skeuomorphic_Retro_Success_Message_Component
Un componente del messaggio di successo di moderata complessità progettato con uno stile scheumorfico, retrò/vintage, adatto ai marchi di moda/bellezza. Include un design reattivo e il supporto per la modalità scura.
Messaggio di successo Componente - Real Estate Dark Mode Candy Colors
Un componente di messaggio di successo per le piattaforme immobiliari, progettato con uno sfondo scuro, colori caramella allegri (rosa bubblegum, verde menta) e reattività per tutte le dimensioni dello schermo, incluso il supporto della modalità scura.