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 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.
Componente Messaggi di successo
Componente Messaggi di successo con modalità oscura - Dispone di effetti reattivi e supporto per temi scuri. Non è necessario alcun codice JavaScript. Per la modalità scura, il supporto CSS è sufficiente.
Componente Messaggi di successo
Un componente che mostra messaggi di successo audaci con uno stile di design brutale, con contrasto elevato, effetti reattivi e supporto per temi scuri.