Composant Messages de réussite
Un composant de message de réussite minimaliste avec des effets réactifs, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-400">Your action was completed successfully. Thank you for your participation!</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
</div>
<div class="p-4">
<button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
</div>
</div>Composants associés
Composant Messages de réussite
Un composant permettant d’afficher des messages de réussite avec un style de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Messages de réussite
Composant Messages de réussite avec mode sombre - Dispose d’effets réactifs et de la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire. Pour le mode sombre, la prise en charge CSS est suffisante.
Composant de message de réussite neumorphique
Un composant simple de message de réussite neumorphique avec une palette de couleurs complémentaire pour un tableau de bord, avec un design réactif et la prise en charge du mode sombre.