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
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 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.
Composant Toast Notifications
Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.