Componenti Messaggi di successo Componente Messaggi di successo

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.

Anteprima

Codice HTML

<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Componenti correlati

Componente Messaggi di successo

Un componente Messaggi di successo progettato in modalità oscura per la lettura di blog/contenuti. Presenta una combinazione di colori analoga ed è reattivo.

Aperto

Componente del messaggio di successo - Complementare alla progettazione dei materiali

Un componente di messaggio di successo in stile Material Design per un blog/sito di contenuti, che utilizza una combinazione di colori complementari. Reattivo con supporto per il tema scuro. Niente JavaScript.

Aperto

SkeuomorphismoSuccessoMessaggio

Messaggio di successo dello scheumorfismo per cruscotto, complesso con colori complementari e modalità scura

Aperto