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
Message de réussite de Memphis Pastel
Un composant de message de réussite simple et réactif avec une esthétique de design Memphis utilisant des couleurs pastel. Présente des formes géométriques ludiques et prend en charge le mode sombre.
Composant SuccessMessagesComponent
Un composant de message de réussite simple pour le commerce électronique, avec une esthétique monochromatique de Material Design, une mise en page réactive et une prise en charge du thème sombre.
Composant Messages de réussite
Composant Messages de Succès avec conception Neumorphism, prise en charge du thème réactif et sombre