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
Composant de notifications toast Neumorphism
Neumorphism Toast Notifications Composant avec effets réactifs et prise en charge du thème sombre.
Retro_Vintage_Toast_Notifications_Component
Un composant de notification de toast simple, sur le thème rétro/vintage, pour les outils CRM/professionnels, avec des neutres chauds, un design réactif et la prise en charge du mode sombre.
Composant Toast Notifications
Un composant Toast Notifications de style Glassmorphism avec des couleurs pastel, conçu pour les blogs et la consommation de contenu. Il prend en charge le mode sombre et dispose d’une interface riche avec des éléments interactifs.