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.
HTML Code
<div class="fixed bottom-5 right-5 space-y-4">
<!-- Success Toast -->
<div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" 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="font-bold">Success!</div>
<div class="text-sm">Item successfully added.</div>
</div>
</div>
<!-- Info Toast -->
<div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" 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="font-bold">Information</div>
<div class="text-sm">Your request is being processed.</div>
</div>
</div>
<!-- Warning Toast -->
<div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" 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 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<div class="font-bold">Warning!</div>
<div class="text-sm">Some issues were found.</div>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" 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="font-bold">Error!</div>
<div class="text-sm">Action could not be completed.</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.
Composant Toast Notifications
Un composant Toast Notifications conçu avec le style Glassmorphism, avec des effets réactifs et la prise en charge des thèmes sombres. Il utilise Tailwind CSS pour le style, ainsi que des images de remplacement de picsum.photos pour les visuels et randomuser.me pour les avatars.
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.