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.
HTML Code
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Toast Notification 1 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
<p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<!-- Toast Notification 2 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
<p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>Composants associés
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.
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.
Toast Notifications
Un composant de notifications Toast réactif et compatible avec les thèmes sombres pour le commerce électronique avec un design minimaliste/plat utilisant une palette de couleurs complémentaire.