Composant Notifications Toast Art Déco
Un composant de notification toast simple et contrasté avec une esthétique Art déco, adapté aux sites d’information et de journalisme. Dispose d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
<!-- Success Toast -->
<div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
<div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
<svg class="w-6 h-6 text-white mr-3" 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>
<h3 class="text-lg font-bold text-white uppercase tracking-wider">Success!</h3>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" 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 class="p-4">
<p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
</div>
</div>
<!-- Error Toast -->
<div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
<div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
<svg class="w-6 h-6 text-white mr-3" 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>
<h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" 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 class="p-4">
<p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
</div>
</div>
</div>
<style>
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.5s ease-out forwards;
}
.md\:animate-slide-in-right {
animation: none; /* Reset for mobile */
}
@media (min-width: 768px) {
.md\:animate-slide-in-right {
animation: slide-in-right 0.5s ease-out forwards;
}
}
</style>Composants associés
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.
Composant Toast Notifications
Composant de notification toast complexe, de style glassmorphism, pour les tableaux de bord, avec des éléments translucides, des effets de flou et une palette de couleurs analogue. Entièrement réactif avec prise en charge du mode sombre.
Composant Toast Notifications
Un composant Toast Notifications de style Glassmorphism avec des couleurs pastel, conçu pour les blogs et la consommation de contenu. Il prend en charge le mode sombre et dispose d’une interface riche avec des éléments interactifs.