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 Toast Notifications avec style Glassmorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
Composant Toast Notifications
Composant de notification Toast avec style Glassmorphism, palette de couleurs Earth tones et conception réactive avec prise en charge du mode sombre.
Composant Toast Notifications
Un composant de notifications Toast minimaliste et dynamique utilisant Tailwind CSS. Le composant est conçu avec une mise en page simple pour les portfolios, prend en charge le mode sombre et est réactif sans JavaScript.