Composant Toast Notifications
Un composant de notification toast neumorphique avec des couleurs pastel, un design réactif et une prise en charge du thème sombre, adapté aux blogs et aux sites de contenu.
HTML Code
<div class="fixed bottom-5 right-5 z-50">
<!-- Toast Notification 1 -->
<div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://api.lorem.space/image/face?w=120&h=120" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe commented on your post.</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">"Great article, very insightful!"</p>
</div>
</div>
</div>
<!-- Toast Notification 2 -->
<div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" 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-3">
<p class="text-sm font-medium text-gray-700 dark:text-gray-200">Successfully saved your draft.</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your changes have been automatically saved.</p>
</div>
</div>
</div>
<!-- Toast Notification 3 -->
<div class="neumorphic-toast p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 dark:text-gray-200">Error: Unable to publish post.</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Please check your internet connection.</p>
</div>
</div>
</div>
</div>
<style>
.neumorphic-toast {
background-color: #e0e5ec; /* Light pastel background */
}
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b8bcc4, -6px -6px 12px #ffffff;
}
.dark .neumorphic-toast {
background-color: #2c2f33; /* Dark pastel background */
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #232528, -6px -6px 12px #35393e;
}
/* Responsive adjustments */
@media (max-width: 640px) {
.neumorphic-toast {
margin-left: 1rem;
margin-right: 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
Toast Notifications
Composant de notifications toast réactives avec style Glassmorphism pour les sites Web d’entreprise/d’entreprise, prenant en charge le thème sombre. Palette de couleurs pastel.
Composant Toast Notifications
Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.