Toast Notifications
Composant Toast Notifications avec style Glassmorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
HTML Code
<div class="fixed bottom-0 right-0 mb-4 mr-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="px-4 py-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
</div>
</div>
</div>Composants associés
Composant Toast Notifications
Un composant Toast Notifications conçu avec le style Glassmorphism, avec des effets réactifs et la prise en charge des thèmes sombres. Il utilise Tailwind CSS pour le style, ainsi que des images de remplacement de picsum.photos pour les visuels et randomuser.me pour les avatars.
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 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.