Composant Toast Notifications
Un ensemble de notifications toast conçues avec un style de typographie suisse/international épuré et minimaliste, avec une palette de couleurs analogue. Optimisé pour les sites Web liés à la photographie, fournissant des commentaires clairs et concis aux utilisateurs. Comprend la conception réactive et la prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-4 right-4 z-50 w-full max-w-sm overflow-hidden p-2 sm:max-w-md">
<!-- Success Toast -->
<div class="mb-3 flex items-center rounded-lg bg-green-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-green-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Success</h3>
<p class="mt-1 text-xs sm:text-sm">Photo 'Parisian Sunset.jpg' uploaded successfully.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Warning Toast -->
<div class="mb-3 flex items-center rounded-lg bg-orange-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-orange-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0L14.803 12c.765 1.36-.2 3-1.743 3H6.94c-1.543 0-2.508-1.64-1.743-3L8.257 3.099zM10 10a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Warning</h3>
<p class="mt-1 text-xs sm:text-sm">Some images may exceed recommended resolution for web.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Error Toast -->
<div class="flex items-center rounded-lg bg-red-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-red-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Error</h3>
<p class="mt-1 text-xs sm:text-sm">Failed to connect to image server. Please try again.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>Composants associés
Composant de notifications toast Neumorphism
Neumorphism Toast Notifications Composant avec effets réactifs et prise en charge du thème sombre.
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.
Composant Toast Notifications
Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.