<div
class="mx-auto flex w-full max-w-sm flex-col gap-6"
role="region"
aria-label="Notifications"
>
<div
role="status"
aria-live="polite"
class="flex items-start gap-3 rounded-2xl bg-white p-4 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<div
class="flex size-9 flex-none items-center justify-center rounded-full bg-emerald-50 text-emerald-600 ring-1 ring-emerald-200/70 ring-inset"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="hi-mini hi-check-circle inline-block size-5"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="min-w-0 grow">
<p class="text-sm font-semibold text-zinc-900">Payment successful</p>
<p class="mt-0.5 text-xs text-zinc-500">
Your invoice for May has been settled. A receipt is on the way.
</p>
<div class="mt-2 flex items-center gap-3 text-xs font-semibold">
<a
href="javascript:void(0)"
class="text-emerald-600 hover:text-emerald-500"
>
View receipt
</a>
<a href="javascript:void(0)" class="text-zinc-500 hover:text-zinc-700">
Dismiss
</a>
</div>
</div>
<button
type="button"
aria-label="Close notification"
class="-mt-1 -mr-1 flex size-7 flex-none items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
class="hi-micro hi-x-mark inline-block size-4"
>
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
/>
</svg>
</button>
</div>
<div
role="alert"
aria-live="assertive"
class="flex items-start gap-3 rounded-2xl bg-white p-4 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<div
class="flex size-9 flex-none items-center justify-center rounded-full bg-rose-50 text-rose-600 ring-1 ring-rose-200/70 ring-inset"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="hi-mini hi-exclamation-triangle inline-block size-5"
>
<path
fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="min-w-0 grow">
<p class="text-sm font-semibold text-zinc-900">Upload failed</p>
<p class="mt-0.5 text-xs text-zinc-500">
The file
<span class="font-medium text-zinc-700">report-q1.pdf</span> exceeds the
25 MB limit.
</p>
<div class="mt-2 flex items-center gap-3 text-xs font-semibold">
<a href="javascript:void(0)" class="text-rose-600 hover:text-rose-500">
Try again
</a>
<a href="javascript:void(0)" class="text-zinc-500 hover:text-zinc-700">
Learn more
</a>
</div>
</div>
<button
type="button"
aria-label="Close notification"
class="-mt-1 -mr-1 flex size-7 flex-none items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
class="hi-micro hi-x-mark inline-block size-4"
>
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
/>
</svg>
</button>
</div>
<div
role="status"
aria-live="polite"
class="flex items-start gap-3 rounded-2xl bg-white p-4 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<div
class="flex size-9 flex-none items-center justify-center rounded-full bg-amber-50 text-amber-600 ring-1 ring-amber-200/70 ring-inset"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="hi-mini hi-clock inline-block size-5"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="min-w-0 grow">
<p class="text-sm font-semibold text-zinc-900">Session expiring soon</p>
<p class="mt-0.5 text-xs text-zinc-500">
You will be signed out in
<span class="font-medium text-zinc-700">2 minutes</span> due to
inactivity.
</p>
<div class="mt-2 flex items-center gap-3 text-xs font-semibold">
<a
href="javascript:void(0)"
class="text-amber-700 hover:text-amber-600"
>
Stay signed in
</a>
<a href="javascript:void(0)" class="text-zinc-500 hover:text-zinc-700">
Sign out now
</a>
</div>
</div>
<button
type="button"
aria-label="Close notification"
class="-mt-1 -mr-1 flex size-7 flex-none items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
class="hi-micro hi-x-mark inline-block size-4"
>
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
/>
</svg>
</button>
</div>
</div>