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.
Codice HTML
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
Componenti correlati
Componente Messaggi di successo
Un componente di messaggio di successo semplice e artistico con una combinazione di colori seppia/marrone, adatto per applicazioni di criptovaluta/blockchain. Presenta un design morbido ispirato all'acquerello, piena reattività e supporto per la modalità scura.
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.
Componente SuccessMessagesComponent
Un semplice componente per il messaggio di successo per l'e-commerce, con un'estetica monocromatica di Material Design, un layout reattivo e il supporto per il tema scuro.