Componente Messaggi di successo
Un componente reattivo per i messaggi di successo progettato per la modalità scura con una combinazione di colori vivaci, ideale per mostrare il lavoro in un portfolio.
Codice HTML
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">John Doe</span>
<span class="text-gray-400 text-sm ml-2">2 minutes ago</span>
</div>
<p class="text-gray-300">Your project has been successfully submitted!</p>
</div>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">Jane Smith</span>
<span class="text-gray-400 text-sm ml-2">5 minutes ago</span>
</div>
<p class="text-gray-300">Your profile has been updated successfully!</p>
</div>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">Mike Johnson</span>
<span class="text-gray-400 text-sm ml-2">10 minutes ago</span>
</div>
<p class="text-gray-300">Your order has been placed successfully!</p>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">
</div>
</div>Componenti correlati
Componente Messaggi di successo
Un componente semplice e pulito per i messaggi di successo con design reattivo e supporto per la modalità oscura.
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 del messaggio di successo neumorfico
Un semplice componente Neumorphic Success Message con una combinazione di colori complementare per una dashboard, con design reattivo e supporto per la modalità scura.