Composant Retro Toast Notifications
Un composant de notification toast à thème rétro avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-5 right-5 space-y-3">
<!-- Success Toast -->
<div class="bg-green-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-bounce">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span>Success! Your operation was successful.</span>
</div>
<button class="ml-4 focus:outline-none">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-shake">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span>Error! Something went wrong.</span>
</div>
<button class="ml-4 focus:outline-none">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Info Toast with Avatar -->
<div class="bg-blue-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-fade-in">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<span>Info: A new message has arrived.</span>
</div>
<button class="ml-4 focus:outline-none">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Dark Mode Styles -->
<style>
@media (prefers-color-scheme: dark) {
.dark .bg-green-600 {
background-color: #059669;
}
.dark .bg-red-600 {
background-color: #dc2626;
}
.dark .bg-blue-600 {
background-color: #2563eb;
}
.dark .text-white {
color: #d1d5db;
}
}
/* Retro Animations */
@keyframes bounce {
0%, 100% {
transform: translateY(-10%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-shake {
animation: shake 0.5s infinite;
}
.animate-fade-in {
animation: fade-in 0.5s ease-out;
}
</style>
</div>Composants associés
Toast Notifications
Composant Toast Notifications avec style Glassmorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
Composant Brutalism Toast Notifications
Un ensemble de notifications de toast d’inspiration brutaliste avec une palette de couleurs neutres chaudes, adaptées aux systèmes de réservation. Présente des contrastes bruts et audacieux et un design réactif avec prise en charge du mode sombre.
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.