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.
HTML Code
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Success Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Success Message</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Your action was successful.</p>
</div>
</div>
</div>
<!-- Info Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-blue-500" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Information</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">This is an informational message.</p>
</div>
</div>
</div>
<!-- Warning Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-500" 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="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Something might be wrong.</p>
</div>
</div>
</div>
<!-- Error Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">An error occurred.</p>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.