Componente Messaggi di successo
Un componente per la visualizzazione di messaggi di successo con uno stile di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<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-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">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.
Componente Messaggi di successo
Un componente semplice e pulito per i messaggi di successo con design reattivo e supporto per la modalità oscura.
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.