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.
HTML Code
<div class="fixed bottom-4 right-4 space-y-2">
<!-- Success Toast -->
<div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Success!</p>
<p>Your action was completed successfully.</p>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Error!</p>
<p>Something went wrong. Please try again.</p>
</div>
</div>
<!-- Info Toast -->
<div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Information</p>
<p>This is an informational message.</p>
</div>
</div>
</div>Composants associés
Composant Toast Notifications
Un composant de notification de toast propre et minimaliste avec un style de typographie suisse/international, une palette de couleurs violette/violette, conçu pour les systèmes de réservation. Entièrement réactif avec prise en charge du mode sombre.
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.
Composant Toast Notifications
Un composant de notification toast en mode sombre conçu pour les applications de tableau de bord, avec une palette de couleurs complémentaire avec divers éléments interactifs.