Free Tailwind CSS dialog examples. Copy and paste into your project. Built with Starting Point UI and works in any Tailwind project.
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-1"
>
Save changes
</button>
<dialog
id="dialog-1"
class="dialog"
aria-labelledby="dialog-1-title"
aria-describedby="dialog-1-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-1-title" class="text-lg font-semibold tracking-tight">
Save changes
</h2>
<p
id="dialog-1-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Your changes will be applied immediately and visible to everyone with
access to this project.
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Cancel
</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-2"
>
Publish project
</button>
<dialog
id="dialog-2"
class="dialog"
aria-labelledby="dialog-2-title"
aria-describedby="dialog-2-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-2-title" class="text-lg font-semibold tracking-tight">
Project published
</h2>
<p
id="dialog-2-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Your project is now live. Share the link with your team to start
collaborating and gather feedback.
</p>
</div>
<div class="field">
<label class="label" for="dialog-2-link">Share link</label>
<div class="flex gap-2">
<input
id="dialog-2-link"
type="text"
readonly=""
class="input flex-1"
value="https://app.example.com/p/atlas-9k3x"
/>
<button type="button" class="btn btn-icon" aria-label="Copy link">
<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"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
</button>
</div>
</div>
<button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
Done
</button>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-3"
>
Publish
</button>
<dialog
id="dialog-3"
class="dialog"
aria-labelledby="dialog-3-title"
aria-describedby="dialog-3-description"
>
<div class="dialog-backdrop"></div>
<div class="dialog-panel">
<div class="dialog-content grid gap-6">
<img
src="https://images.pexels.com/photos/7932264/pexels-photo-7932264.jpeg?auto=compress&cs=tinysrgb&w=640&fit=crop"
alt="Project cover"
class="rounded-lg aspect-3/2 w-full object-cover"
/>
<div>
<h2 id="dialog-3-title" class="text-lg font-semibold tracking-tight">
Project launched
</h2>
<p
id="dialog-3-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Your project is now live. We've notified your team and posted an
update to your channel.
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn">
<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"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
Copy link
</button>
<button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
Finish
</button>
</div>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-4"
>
Share
</button>
<dialog
id="dialog-4"
class="dialog"
aria-labelledby="dialog-4-title"
aria-describedby="dialog-4-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-4-title" class="text-lg font-semibold tracking-tight">
Share project
</h2>
<p
id="dialog-4-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Invite people to collaborate on this project.
</p>
</div>
<div class="flex gap-2">
<input
type="email"
class="input flex-1"
placeholder="Add people by email"
/>
<button type="button" class="btn">Invite</button>
</div>
<div class="separator"></div>
<div class="grid gap-4">
<span class="text-sm font-medium">People with access</span>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img
class="avatar"
src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
alt="Sarah Johnson"
/>
<div class="text-sm">
<p class="font-semibold text-foreground">Sarah Johnson</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select class="select h-8 w-24">
<option value="owner" selected="">Owner</option>
<option value="editor">Editor</option>
<option value="viewer">Viewer</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img
class="avatar"
src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
alt="Michael Chen"
/>
<div class="text-sm">
<p class="font-semibold text-foreground">Michael Chen</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select class="select h-8 w-24">
<option value="editor" selected="">Editor</option>
<option value="viewer">Viewer</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img
class="avatar"
src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
alt="Emma Wilson"
/>
<div class="text-sm">
<p class="font-semibold text-foreground">Emma Wilson</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select class="select h-8 w-24">
<option value="viewer" selected="">Viewer</option>
<option value="editor">Editor</option>
</select>
</div>
</div>
<button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
Done
</button>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-5"
>
View invitation
</button>
<dialog
id="dialog-5"
class="dialog"
aria-labelledby="dialog-5-title"
aria-describedby="dialog-5-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>
<div class="avatar-group justify-center mb-4">
<img
class="avatar avatar-group-item"
src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
alt="Emma Wilson"
/>
<img
class="avatar avatar-group-item"
src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
alt="Michael Chen"
/>
<img
class="avatar avatar-group-item"
src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
alt="Sarah Johnson"
/>
</div>
<h2
id="dialog-5-title"
class="text-lg font-semibold tracking-tight text-center"
>
Welcome to Team Atlas
</h2>
<p
id="dialog-5-description"
class="text-sm/6 text-muted-foreground mt-2 text-center"
>
You've been added as a Member. Say hi to your new teammates and
start collaborating.
</p>
</div>
<button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
Get started
</button>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-destructive"
data-sp-toggle="dialog"
data-sp-target="#dialog-6"
>
Delete project
</button>
<dialog
id="dialog-6"
class="dialog"
aria-labelledby="dialog-6-title"
aria-describedby="dialog-6-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-6-title" class="text-lg font-semibold tracking-tight">
Delete project
</h2>
<p
id="dialog-6-description"
class="text-sm/6 text-muted-foreground mt-2"
>
This will permanently delete the project and all of its data. This
action cannot be undone.
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Cancel
</button>
<button type="button" class="btn btn-destructive">
Delete project
</button>
</div>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-destructive"
data-sp-toggle="dialog"
data-sp-target="#dialog-7"
>
Delete account
</button>
<dialog
id="dialog-7"
class="dialog"
aria-labelledby="dialog-7-title"
aria-describedby="dialog-7-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-7-title" class="text-lg font-semibold tracking-tight">
Delete account
</h2>
<p
id="dialog-7-description"
class="text-sm/6 text-muted-foreground mt-2"
>
This will permanently remove your account and related data. Warning,
this cannot be undone.
</p>
</div>
<form class="grid gap-6">
<div class="field">
<label for="dialog-7-password" class="label">
Password confirmation
</label>
<div class="input-group">
<input
id="dialog-7-password"
type="password"
class="input"
name="password"
/>
<button
type="button"
class="input-group-btn-icon"
aria-label="Show password"
tabindex="-1"
>
<svg data-icon="eye" 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"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><svg data-icon="eye-off" class="hidden" 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"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Cancel
</button>
<button type="submit" class="btn btn-destructive">
Delete account
</button>
</div>
</form>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-8"
>
Sign up
</button>
<dialog
id="dialog-8"
class="dialog"
aria-labelledby="dialog-8-title"
aria-describedby="dialog-8-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-8-title" class="text-lg font-semibold tracking-tight">
Sign Up
</h2>
<p
id="dialog-8-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Create an account to get started on the platform and unlock all
premium features and benefits.
</p>
</div>
<div class="grid grid-cols-2 gap-5">
<button class="btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
Google
</button>
<button class="btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
GitHub
</button>
</div>
<div class="relative" role="separator">
<div class="absolute inset-0 flex items-center">
<span class="w-full border-t"></span>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-popover px-2 text-muted-foreground">
Or continue with
</span>
</div>
</div>
<form class="field-group">
<div class="field">
<label class="label" for="dialog-8-email">Email</label>
<input
class="input"
id="dialog-8-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<label class="label" for="dialog-8-password">Password</label>
<input
class="input"
id="dialog-8-password"
type="password"
name="password"
/>
</div>
<button class="btn btn-primary" type="submit">Create Account</button>
</form>
<p class="text-sm text-center text-muted-foreground">
Already have an account?
<a
href="#"
class="text-foreground font-medium underline underline-offset-4"
>
Sign in
</a>
</p>
</div>
</div>
</dialog>
<button
type="button"
class="btn"
data-sp-toggle="dialog"
data-sp-target="#dialog-9"
>
Log in
</button>
<dialog
id="dialog-9"
class="dialog"
aria-labelledby="dialog-9-title"
aria-describedby="dialog-9-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-9-title" class="text-lg font-semibold tracking-tight">
Sign in
</h2>
<p
id="dialog-9-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Enter your credentials to access your account.
</p>
</div>
<form class="field-group">
<div class="field">
<label class="label" for="dialog-9-email">Email</label>
<input
class="input"
id="dialog-9-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<div class="flex items-center justify-between">
<label class="label" for="dialog-9-password">Password</label>
<a href="#" class="text-sm underline-offset-4 hover:underline">
Forgot password?
</a>
</div>
<input
class="input"
id="dialog-9-password"
type="password"
name="password"
/>
</div>
<button class="btn btn-primary" type="submit">Sign In</button>
</form>
<div class="relative" role="separator">
<div class="absolute inset-0 flex items-center">
<span class="w-full border-t"></span>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-popover px-2 text-muted-foreground">
Or continue with
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-5">
<button class="btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
Google
</button>
<button class="btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
GitHub
</button>
</div>
<p class="text-sm text-center text-muted-foreground">
Don't have an account?
<a
href="#"
class="text-foreground font-medium underline underline-offset-4"
>
Sign up
</a>
</p>
</div>
</div>
</dialog>
<button
type="button"
class="btn btn-primary"
data-sp-toggle="dialog"
data-sp-target="#dialog-10"
>
Enable 2FA
</button>
<dialog
id="dialog-10"
class="dialog"
aria-labelledby="dialog-10-title"
aria-describedby="dialog-10-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-10-title" class="text-lg font-semibold tracking-tight">
Enable two-factor authentication
</h2>
<p
id="dialog-10-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Scan the QR code below with your authenticator app, or enter the
provided setup key manually.
</p>
</div>
<div
class="flex aspect-3/2 items-center justify-center rounded-lg border bg-muted/50"
>
<div class="relative rounded-lg bg-white p-2 dark:bg-white">
<img src="/qr-placeholder.svg" alt="QR code" class="size-32" />
<div class="pointer-events-none absolute inset-0">
<div
class="absolute top-0 left-0 size-3 rounded-tl border-t-2 border-l-2 border-primary"
></div>
<div
class="absolute top-0 right-0 size-3 rounded-tr border-t-2 border-r-2 border-primary"
></div>
<div
class="absolute bottom-0 right-0 size-3 rounded-br border-b-2 border-r-2 border-primary"
></div>
<div
class="absolute bottom-0 left-0 size-3 rounded-bl border-b-2 border-l-2 border-primary"
></div>
</div>
</div>
</div>
<div class="field">
<label class="label" for="dialog-10-setup-key">Setup key</label>
<input
id="dialog-10-setup-key"
type="text"
readonly=""
class="input font-mono text-sm"
value="JBSWY3DPEHPK3PXP"
/>
</div>
<form class="field-group">
<div class="field">
<label class="label" for="dialog-10-code">Verification code</label>
<input
id="dialog-10-code"
type="text"
inputmode="numeric"
autocomplete="one-time-code"
class="input"
placeholder="123456"
name="code"
/>
</div>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Cancel
</button>
<button type="submit" class="btn btn-primary">Confirm</button>
</div>
</form>
</div>
</div>
</dialog>
<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>
<button
type="button"
class="btn"
data-sp-toggle="dialog"
data-sp-target="#dialog-12"
>
Review terms
</button>
<dialog
id="dialog-12"
class="dialog"
aria-labelledby="dialog-12-title"
aria-describedby="dialog-12-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-12-title" class="text-lg font-semibold tracking-tight">
Terms of Service
</h2>
<p
id="dialog-12-description"
class="text-sm/6 text-muted-foreground mt-2"
>
Please review our terms before continuing.
</p>
</div>
<div
class="max-h-64 overflow-y-auto rounded-md border bg-muted/50 p-4 text-sm/6 text-muted-foreground space-y-4"
>
<section>
<h3 class="font-semibold text-foreground">1. Acceptance of Terms</h3>
<p class="mt-1">
By accessing or using this service, you agree to be bound by these
Terms. If you do not agree to all of the terms, you may not use the
service.
</p>
</section>
<section>
<h3 class="font-semibold text-foreground">2. Use of Service</h3>
<p class="mt-1">
You agree to use the service only for lawful purposes and in
accordance with these Terms. You are responsible for all activity
that occurs under your account.
</p>
</section>
<section>
<h3 class="font-semibold text-foreground">3. Privacy</h3>
<p class="mt-1">
Your use of the service is also governed by our Privacy Policy.
Please review it to understand how we collect and use your
information.
</p>
</section>
<section>
<h3 class="font-semibold text-foreground">4. Modifications</h3>
<p class="mt-1">
We may modify these Terms at any time. Continued use of the service
after changes constitutes acceptance of the modified Terms.
</p>
</section>
<section>
<h3 class="font-semibold text-foreground">5. Termination</h3>
<p class="mt-1">
We reserve the right to suspend or terminate your access to the
service at any time, for any reason, without notice.
</p>
</section>
</div>
<form class="grid gap-6">
<label class="flex items-center gap-2 text-sm">
<input
type="checkbox"
class="checkbox peer"
required=""
name="agree"
/>
I agree to the Terms of Service
</label>
<div class="grid grid-cols-2 gap-2">
<button type="button" class="btn" data-sp-dismiss="dialog">
Cancel
</button>
<button
type="submit"
class="btn btn-primary peer-not-checked:opacity-50 peer-not-checked:pointer-events-none"
>
Continue
</button>
</div>
</form>
</div>
</div>
</dialog>