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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
<div class="neumorphic-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg dark:shadow-none">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-500 text-white dark:bg-green-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
<div class="flex-1">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your operation was completed successfully.</p>
</div>
</div>
</div>
</div>
<style>
.neumorphic-card {
border-radius: 1rem;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
transition: all 0.3s ease;
}
.dark .neumorphic-card {
background: #2d3748; /* dark gray */
box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
}
.neumorphic-card:hover {
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.dark .neumorphic-card:hover {
box-shadow: 4px 4px 8px #1a202c, -4px -4px 8px #4a5568;
}
</style>Composants associés
Composant Messages de réussite
Composant de messages de réussite réactifs avec prise en charge du mode sombre et style Glassmorphism pour le commerce électronique.
Composant Messages de réussite
Un composant de messages de réussite de style 3D avec des effets réactifs et la prise en charge du thème sombre, avec des espaces réservés pour les images et les avatars.
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.