<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>
