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
SkeuomorphismoSuccessoMessaggio
Messaggio di successo dello scheumorfismo per cruscotto, complesso con colori complementari e modalità scura
Componente Messaggi di successo
Un componente di messaggio di successo complesso, reattivo e compatibile con il tema scuro per applicazioni di social media, caratterizzato da un vivace design 3D che utilizza Tailwind CSS. Include più elementi interattivi.
Componente Messaggi di successo
Un componente reattivo per i messaggi di successo con elementi di progettazione 3D e supporto per temi scuri, che utilizza Tailwind CSS.