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 Messaggi di successo progettato in modalità oscura per la lettura di blog/contenuti. Presenta una combinazione di colori analoga ed è reattivo.
Componente Messaggi di successo
Un componente di messaggi di successo dal design minimalista/piatto per i social media con colori pastello chiari e un layout reattivo complesso.
Componente Messaggi di successo
Un componente minimalista per i messaggi di successo con effetti reattivi, che supporta sia i temi chiari che quelli scuri utilizzando Tailwind CSS.