Componenti Messaggi di successo Messaggio di successo Componente 17

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.

Anteprima

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.

Aperto

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.

Aperto

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.

Aperto