Componente Messaggi di successo
Un componente reattivo per i messaggi di successo ispirato al Material Design con i toni della terra e il supporto del tema scuro, progettato per il consumo di contenuti.
Codice HTML
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your changes have been saved successfully. You can now continue to explore the content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
</div>
</div>
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Thanks for your submission! Stay tuned for updates regarding your content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
</div>
</div>Componenti correlati
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 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.
Componente Messaggi di successo
Componente Responsive Success Messages con supporto Dark Mode e Glassmorphism Style per l'e-commerce.