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.
HTML Code
<div class="fixed bottom-5 right-5 z-50 space-y-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
<p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
<p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
<p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</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.
Notifications Toast rétro
Un composant de notifications Toast réactif avec un design rétro/vintage, une palette de couleurs triadique et une prise en charge du mode sombre, construit avec Tailwind CSS pour une utilisation en portefeuille.
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.