{% for message in app.flashes('success') %}
    <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show" ... class="fixed top-5 right-5 z-50 w-full max-w-sm">
        <div class="bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden ring-1 ring-emerald-500">
            <div class="p-4 flex items-start">
                <div class="h-10 w-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-bold text-slate-900">Success</p>
                    <p class="text-xs text-slate-500">{{ message }}</p>
                </div>
            </div>
            <div class="h-1 bg-emerald-100 w-full">
                <div class="h-full bg-emerald-500" style="animation: shrink 5s linear forwards;"></div>
            </div>
        </div>
    </div>
{% endfor %}

{% for message in app.flashes('error') %}
    <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show" ... class="fixed top-5 right-5 z-50 w-full max-w-sm">
        <div class="bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden ring-1 ring-rose-500">
            <div class="p-4 flex items-start">
                <div class="h-10 w-10 rounded-xl bg-rose-50 flex items-center justify-center text-rose-600">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-bold text-slate-900">Login Failed</p>
                    <p class="text-xs text-slate-500">{{ message }}</p>
                </div>
            </div>
            <div class="h-1 bg-rose-100 w-full">
                <div class="h-full bg-rose-500" style="animation: shrink 5s linear forwards;"></div>
            </div>
        </div>
    </div>
{% endfor %}

<style>
@keyframes shrink {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
</style>