Tailwind CSS Modal Dialog Examples
A growing collection of modal dialog examples for Tailwind CSS. Copy and paste the HTML into your project and adjust it with utility classes.
Login Modal
A login modal for Tailwind CSS. Use it to let people sign in without leaving the page they are on. Built with the dialog and field components.
<button type="button" class="btn btn-outline" id="login-modal-trigger">
Sign In
</button>
<dialog class="dialog" data-sp-toggle="#login-modal-trigger">
<div class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<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-header">
<h2 class="dialog-title">Sign In</h2>
<p class="dialog-description">
Enter your credentials to access your account.
</p>
</div>
<div class="dialog-content">
<div class="field-group">
<form id="login-modal" class="field-group">
<div class="field">
<label class="label" for="login-modal-email">Email</label
><input
class="input"
id="login-modal-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<div class="flex w-full items-center">
<label class="label" for="login-modal-password">Password</label
><a
href="#"
class="ml-auto text-sm underline-offset-4 hover:underline"
>Forgot password?</a
>
</div>
<input
class="input"
id="login-modal-password"
type="password"
name="password"
/>
</div>
<button type="submit" class="btn">Sign In</button>
</form>
<div class="field-separator">
<span class="text-xs uppercase">Or continue with</span>
</div>
<div class="grid grid-cols-2 gap-5">
<button type="button" class="btn btn-outline">
<svg
class="icon-start"
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 type="button" class="btn btn-outline">
<svg
class="icon-start"
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>
</div>
<div class="dialog-footer sm:justify-center">
<p class="text-sm text-muted-foreground">
Don't have an account?
<a
href="#"
class="font-medium text-foreground underline underline-offset-4"
>Sign up</a
>
</p>
</div>
</div>
</dialog>Sign Up Modal
A sign up modal for Tailwind CSS. Use it to let visitors create an account in place, like from a pricing page or a gated feature. Built with the dialog and field components.
<button type="button" class="btn btn-outline" id="sign-up-modal-trigger">
Sign Up
</button>
<dialog class="dialog" data-sp-toggle="#sign-up-modal-trigger">
<div class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<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-header">
<h2 class="dialog-title">Sign Up</h2>
<p class="dialog-description">
Create an account to get started on the platform and unlock all features
and benefits.
</p>
</div>
<div class="dialog-content">
<div class="field-group">
<div class="grid grid-cols-2 gap-5">
<button type="button" class="btn btn-outline">
<svg
class="icon-start"
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 type="button" class="btn btn-outline">
<svg
class="icon-start"
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="field-separator">
<span class="text-xs uppercase">Or continue with</span>
</div>
<form id="sign-up-modal" class="field-group">
<div class="field">
<label class="label" for="sign-up-modal-email">Email</label
><input
class="input"
id="sign-up-modal-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<label class="label" for="sign-up-modal-password">Password</label
><input
class="input"
id="sign-up-modal-password"
type="password"
name="password"
/>
</div>
<button type="submit" class="btn">Create Account</button>
</form>
</div>
</div>
<div class="dialog-footer sm:justify-center">
<p class="text-sm text-muted-foreground">
Already have an account?
<a
href="#"
class="font-medium text-foreground underline underline-offset-4"
>Sign in</a
>
</p>
</div>
</div>
</dialog>Share Modal
A share modal for Tailwind CSS. Use it to let people copy a link and manage who can view or edit a document. Built with the dialog, avatar, and select components.
<button type="button" class="btn btn-outline" id="share-modal-trigger">
Share
</button>
<dialog class="dialog" data-sp-toggle="#share-modal-trigger">
<div class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<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-header">
<h2 class="dialog-title">Share Document</h2>
<p class="dialog-description">
Invite others to view or edit this document and work together
seamlessly.
</p>
</div>
<div class="dialog-content gap-6">
<div class="flex gap-2">
<input
class="input flex-1"
type="text"
readonly=""
aria-label="Document link"
value="https://example.com/doc/abc123"
/><button
type="button"
class="btn btn-outline 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 class="separator"></div>
<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">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Leila Navarro"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Leila Navarro"
>
<option value="write" selected="">Write</option>
<option value="read">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Theo Marchetti"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">TM</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Theo Marchetti</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Theo Marchetti"
>
<option value="write">Write</option>
<option value="read" selected="">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Maya Santoso"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">MS</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Camille Laurent</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Camille Laurent"
>
<option value="write">Write</option>
<option value="read" selected="">Read</option>
</select>
</div>
</div>
</div>
</dialog>Feedback Modal
A feedback modal for Tailwind CSS. Use it to collect suggestions and bug reports from anywhere in your app. Built with the dialog, select, and textarea components.
<button type="button" class="btn btn-outline" id="feedback-modal-trigger">
Feedback
</button>
<dialog class="dialog" data-sp-toggle="#feedback-modal-trigger">
<form id="feedback" class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<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-header">
<h2 class="dialog-title">Submit Feedback</h2>
<p class="dialog-description">Share your thoughts to help us improve.</p>
</div>
<div class="dialog-content">
<div class="field-group">
<div class="field">
<label class="label" for="feedback-title">Title</label
><input
class="input"
id="feedback-title"
type="text"
placeholder="Feedback title"
name="title"
/>
</div>
<div class="field">
<label class="label" for="feedback-type">Type</label
><select class="select" id="feedback-type" name="type">
<option value="">Select type</option>
<option value="suggestion">Suggestion</option>
<option value="complaint">Complaint</option>
<option value="praise">Praise</option>
</select>
</div>
<div class="field">
<label class="label" for="feedback-description">Description</label
><textarea
class="textarea"
placeholder="Tell us more..."
id="feedback-description"
name="description"
></textarea>
</div>
</div>
</div>
<div class="dialog-footer">
<button type="button" class="btn btn-outline" data-sp-dismiss="">
Cancel</button
><button type="submit" class="btn">Submit</button>
</div>
</form>
</dialog>Payment Method Modal
A payment method modal for Tailwind CSS. Use it to add a card or wallet in checkout and billing settings. Built with the dialog and field components.
<button type="button" class="btn btn-outline" id="payment-method-modal-trigger">
Add Payment Method
</button>
<dialog class="dialog" data-sp-toggle="#payment-method-modal-trigger">
<form id="pay" class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<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-header">
<h2 class="dialog-title">Payment Method</h2>
<p class="dialog-description">
Choose how you'd like to pay for your order.
</p>
</div>
<div class="dialog-content gap-6">
<div
class="grid grid-cols-3 gap-3"
role="radiogroup"
aria-label="Payment method"
>
<label class="label"
><div class="field items-center gap-2 text-center">
<input
type="radio"
class="sr-only"
name="payment"
checked=""
value="card"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z"
></path></svg
><span class="text-sm font-medium">Card</span>
</div></label
><label class="label"
><div class="field items-center gap-2 text-center">
<input
type="radio"
class="sr-only"
name="payment"
value="paypal"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"
></path></svg
><span class="text-sm font-medium">PayPal</span>
</div></label
><label class="label"
><div class="field items-center gap-2 text-center">
<input
type="radio"
class="sr-only"
name="payment"
value="apple"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
></path></svg
><span class="text-sm font-medium">Apple</span>
</div></label
>
</div>
<div class="field-group">
<div class="field">
<label class="label" for="pay-cardholder-name">Cardholder Name</label
><input
class="input"
id="pay-cardholder-name"
type="text"
placeholder="John Doe"
name="cardholder-name"
/>
</div>
<div class="field">
<label class="label" for="pay-card-number">Card Number</label
><input
class="input"
id="pay-card-number"
type="text"
placeholder="1234 5678 9012 3456"
name="card-number"
/>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="field">
<label class="label" for="pay-month">Month</label
><input
class="input"
id="pay-month"
type="text"
placeholder="MM"
name="month"
/>
</div>
<div class="field">
<label class="label" for="pay-year">Year</label
><input
class="input"
id="pay-year"
type="text"
placeholder="YY"
name="year"
/>
</div>
<div class="field">
<label class="label" for="pay-cvv">CVV</label
><input
class="input"
id="pay-cvv"
type="text"
placeholder="123"
name="cvv"
/>
</div>
</div>
</div>
</div>
<div class="dialog-footer">
<button type="submit" class="btn w-full">Continue</button>
</div>
</form>
</dialog>Payment Success Modal
A payment success modal for Tailwind CSS. Use it to confirm a completed payment and point people to the next step. Built with the dialog and button components.
<button
type="button"
class="btn btn-outline"
id="payment-success-modal-trigger"
>
Pay Invoice
</button>
<dialog class="dialog" data-sp-toggle="#payment-success-modal-trigger">
<div class="dialog-panel">
<div class="dialog-header items-center text-center">
<div
class="mb-2 flex size-10 items-center justify-center rounded-lg bg-muted"
>
<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-6"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<h2 class="dialog-title">Invoice paid</h2>
<p class="dialog-description">
You paid $17,975.30. A receipt copy was sent to [email protected].
</p>
</div>
<div class="dialog-footer sm:flex-col">
<button type="button" class="btn w-full">Next invoice</button
><button type="button" class="btn btn-outline w-full" data-sp-dismiss="">
Done
</button>
</div>
</div>
</dialog>