Composant Messages de réussite
Un composant de messages de réussite réactif avec des éléments de conception 3D et la prise en charge du thème sombre, utilisant Tailwind CSS.
HTML Code
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your operation was successful! This message confirms that your changes were saved properly.
</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #1F2937;
}
.dark\:text-gray-200 {
color: #E5E7EB;
}
.dark\:text-gray-400 {
color: #9CA3AF;
}
.dark\:shadow-2xl {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
}
</style>Composants associés
Composant Messages de réussite
Un composant de message de réussite simple avec une palette de couleurs pastel, des animations subtiles pour les micro-interactions et un design réactif avec prise en charge du thème sombre. Il est conçu pour qu’un portefeuille reconnaisse les actions de l’utilisateur.
Industrial_Success_Message
Un composant de message de réussite simple, de style industriel, avec des neutres chauds, conçu pour les outils CRM/Business, avec une esthétique de matière première et une réactivité totale avec prise en charge du mode sombre.
Composant Messages de réussite
Un composant de messages de réussite réactif conçu pour le mode sombre avec une palette de couleurs vives, idéal pour présenter le travail dans un portfolio.