Componente Messaggi di successo
Un componente reattivo per i messaggi di successo progettato in stile scheumorfico utilizzando Tailwind CSS, che fornisce supporto per i temi scuri.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
<p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
</div>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
<div class="mt-4">
<a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
</div>
</div>
<!-- Dark Mode Styles -->
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>
Componenti correlati
Componente Messaggi di successo
Componente Messaggi di Successo con design del Neumorfismo, supporto per temi reattivi e scuri
Componente Messaggi di successo
Un complesso componente di messaggi di successo ispirato al Material Design per applicazioni di social media, con colori analoghi, reattività e supporto per la modalità scura.
Componente del messaggio di successo neumorfico
Un semplice componente Neumorphic Success Message con una combinazione di colori complementare per una dashboard, con design reattivo e supporto per la modalità scura.