Composant Toast Notifications
Un composant de notifications toast de style brutaliste utilisant Tailwind CSS, conçu pour un portefeuille qui présente des travaux ou des produits. La conception intègre une palette de couleurs analogue et prend en charge le mode sombre avec une interface complexe.
HTML Code
<div class="fixed top-4 right-4 z-50 space-y-4">
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Notification Title</h2>
<p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
</div>
<button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Another Notification</h2>
<p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
</div>
<button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Success Notification</h2>
<p class="text-sm">Your latest action was successful. Keep up the great work!</p>
</div>
<button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
</div>Composants associés
Composant de notifications toast Neumorphism
Neumorphism Toast Notifications Composant avec effets réactifs et prise en charge du thème sombre.
Toast Notifications
Composant de notifications Toast de conception minimaliste / plate avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille. Réactif avec prise en charge du thème sombre.
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.