Componente Messaggi di successo
Un componente che mostra messaggi di successo audaci con uno stile di design brutale, con contrasto elevato, effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
</div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
</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.
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.
Componente Messaggi di successo
Un componente reattivo per i messaggi di successo progettato per la modalità scura con una combinazione di colori vivaci, ideale per mostrare il lavoro in un portfolio.