Composant Messages de réussite
Un composant réactif qui affiche des messages de réussite dans un style minimaliste, adapté à la présentation de travaux ou de produits avec prise en charge du thème sombre.
HTML Code
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
Composants associés
Composant Message de Réussite - Conception Matérielle Complémentaire
Un composant de message de réussite de style Material Design pour un blog/site de contenu, utilisant une palette de couleurs complémentaire. Réactif avec prise en charge du thème sombre. Pas de JavaScript.
Composant Messages de réussite
Un composant de messages de réussite réactif conçu dans un style skeuomorphique à l’aide de Tailwind CSS, fournissant la prise en charge des thèmes sombres.
Composant Messages de réussite
Un composant de message de réussite propre et fiable pour les organisations à but non lucratif/caritatives, utilisant une palette de couleurs violette/violette. Il est réactif et prend en charge le mode sombre.