Messaggio di successo Componente 17
Un componente per messaggi di successo audace e crudo progettato con Tailwind CSS con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
<h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">
Your operation was completed successfully. Check your account for the latest updates!
</p>
<div class="flex justify-end mt-4">
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Close
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: #2D3748;
}
.text-gray-700 {
color: #E2E8F0;
}
}
</style>Componenti correlati
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.
Componente Messaggi di successo
Un componente di messaggio di successo complesso, reattivo e compatibile con il tema scuro per applicazioni di social media, caratterizzato da un vivace design 3D che utilizza Tailwind CSS. Include più elementi interattivi.
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.