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
Notifications de toast pastel skeuomorphique
Un composant de notification toast complexe, skeuomorphe et sur le thème pastel pour les plateformes de divertissement/médias, avec plusieurs types de notification avec prise en charge du mode sombre et conception réactive.
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 ensemble de notifications toast conçues avec un style de typographie suisse/international épuré et minimaliste, avec une palette de couleurs analogue. Optimisé pour les sites Web liés à la photographie, fournissant des commentaires clairs et concis aux utilisateurs. Comprend la conception réactive et la prise en charge du mode sombre.