Componenti Messaggi di successo Componente Messaggi di successo

Componente Messaggi di successo

Un componente reattivo per i messaggi di successo progettato in stile scheumorfico utilizzando Tailwind CSS, che fornisce supporto per i temi scuri.

Anteprima

Codice HTML

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
            <p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
        </div>
    </div>
    <img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
    <div class="mt-4">
        <a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
    </div>
</div>

<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Componenti correlati

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.

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

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.

Aperto