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.
Codice HTML
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<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. Thank you for your participation!</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
</div>
<div class="p-4">
<button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
</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 reattivo per i messaggi di successo ispirato al Material Design con i toni della terra e il supporto del tema scuro, progettato per il consumo di contenuti.
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.