<div
class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
<div class="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/50 sm:p-8">
<div class="flex items-center justify-between gap-2">
<div>
<h2 class="text-xl font-semibold text-zinc-950">Success!</h2>
<p class="mt-1 text-sm text-zinc-600">
Your action has been completed successfully.
</p>
</div>
<button
type="button"
class="rounded-lg p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-x-mark inline-block size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="my-6 border-y border-dashed border-zinc-200 py-6">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="flex-none">
<div
class="flex size-12 items-center justify-center rounded-full bg-emerald-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-check inline-block size-6 text-emerald-600"
>
<path d="M20 6 9 17l-5-5" />
</svg>
</div>
</div>
<div class="flex grow flex-col gap-6">
<div>
<h3 class="font-medium text-zinc-950">
Account Created Successfully
</h3>
<p class="mt-1 text-sm/relaxed text-zinc-600">
Your new user account has been created and is now active. A
welcome email with login credentials has been sent to the provided
email address.
</p>
</div>
<div class="rounded-lg bg-zinc-50 p-4">
<h4 class="font-medium text-zinc-900">Account Details</h4>
<div
class="mt-2 flex flex-col gap-4 text-sm text-zinc-600 sm:gap-2"
>
<div class="flex flex-col justify-between gap-2 sm:flex-row">
<div>Username:</div>
<div class="font-medium text-zinc-900">
john.doe@example.com
</div>
</div>
<div class="flex flex-col justify-between gap-2 sm:flex-row">
<div>Account ID:</div>
<div>#USR-2026-001</div>
</div>
<div class="flex flex-col justify-between gap-2 sm:flex-row">
<div>Created:</div>
<div>January 15, 2026 at 2:34 PM</div>
</div>
<div class="flex flex-col justify-between gap-2 sm:flex-row">
<div>Status:</div>
<div class="inline-flex items-center gap-1">
<div class="size-2 rounded-full bg-emerald-500"></div>
Active
</div>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-zinc-900">Next Steps</h4>
<ul class="mt-2 flex flex-col gap-2 text-sm text-zinc-600">
<li class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-check inline-block size-4 text-emerald-600"
>
<path
fill-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
<span>Check your email for login instructions</span>
</li>
<li class="flex items-center gap-2">
<div class="size-4 rounded-full border border-zinc-300"></div>
<span>Complete your profile setup</span>
</li>
<li class="flex items-center gap-2">
<div
class="size-4 flex-none rounded-full border border-zinc-300"
></div>
<span>Explore available features and tools</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex flex-col justify-end gap-3 sm:flex-row">
<button
type="button"
class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-6 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
>
View Account
</button>
<button
type="button"
class="flex items-center justify-center gap-2 rounded-lg border border-emerald-600 bg-emerald-600 px-6 py-2.5 text-sm font-medium text-white hover:border-emerald-700 hover:bg-emerald-700 focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-2 focus:outline-none active:border-emerald-800 active:bg-emerald-800"
>
Continue
</button>
</div>
</div>
</div>