<button
type="button"
class="btn"
data-sp-toggle="dialog"
data-sp-target="#dialog-11"
>
Show recovery codes
</button>
<dialog
id="dialog-11"
class="dialog"
aria-labelledby="dialog-11-title"
aria-describedby="dialog-11-description"
>
<div class="dialog-backdrop"></div>
<div class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-icon-xs absolute top-3 right-3"
aria-label="Close"
data-sp-dismiss="dialog"
>
<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" class="size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</button>
<div class="dialog-content grid gap-6">
<div>
<h2 id="dialog-11-title" class="text-lg font-semibold tracking-tight">
Recovery codes
</h2>
<p
id="dialog-11-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Store these codes safely. Each can be used once if you lose access to
your authenticator app.
</p>
</div>
<div class="grid grid-cols-2 gap-2 rounded-lg border bg-muted/50 p-3">
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
a1b2c-3d4e5
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
f6g7h-8i9j0
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
k1l2m-3n4o5
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
p6q7r-8s9t0
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
u1v2w-3x4y5
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
z6a7b-8c9d0
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
e1f2g-3h4i5
</code>
<code
class="rounded border bg-background px-2 py-1.5 text-center font-mono text-xs"
>
j6k7l-8m9n0
</code>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Close
</button>
<button type="button" class="btn btn-primary">Regenerate codes</button>
</div>
</div>
</div>
</dialog>