Composant de notifications toast Neumorphism
Neumorphism Toast Notifications Composant avec effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen p-10">
<div class="w-full max-w-sm mx-auto">
<div class="flex items-center p-6 neumorphism-card rounded-xl">
<div class="flex-shrink-0">
<svg class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-4">
<p class="font-semibold text-gray-700 dark:text-gray-200">Success!</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
</div>
</div>
<!-- Add more toast notifications as needed -->
</div>
</div>
<style>
/* Base styles for neumorphism effect */
.neumorphism-card {
background: linear-gradient(145deg, #e0e0e0, #ffffff);
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.neumorphism-card {
background: linear-gradient(145deg, #2c2c2c, #383838);
box-shadow: 8px 8px 16px #232323, -8px -8px 16px #383838;
}
}
/* Responsive adjustments */
@media (max-width: 600px) {
.neumorphism-card {
padding: 1rem;
}
}
</style>
Composants associés
Toast Notifications
Composant de notifications Toast de conception minimaliste / plate avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille. Réactif avec prise en charge du thème sombre.
Composant Toast Notifications
Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.
Composant Toast Notifications
Un composant Toast Notifications réactif conçu avec Glassmorphism, doté d’un schéma de couleurs monochromatique, d’une prise en charge du mode sombre et prêt à être utilisé dans un portefeuille.