| title | description | navigation | github | prev | next | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Dialog/Modal - Material Tailwind |
Customise your web projects with our easy-to-use dialog (modal) component for Tailwind CSS using Material Design guidelines. |
|
dialog |
carousel |
icon-button |
Use our Tailwind CSS dialog (also known as modal) component to inform users about a task or important information that require decisions, or involves multiple tasks.
A dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on screen until confirmed/dismissed.
See below our modal examples styled with Tailwind CSS that you can use for your web or mobile project.
You can initialize a new dialog by adding the data-dialog-target=" data attribute to the trigger element, the {dialog}"data-dialog-backdrop=" to the backdrop element and the {dialogName}"
data-dialog=" to the dialog element itself and make sure that the values for those data attributes are the same.{dialogName}"
You can also use the data-dialog-close="true" for the element that you want to close the dialog with when clicking.
This component example includes a button to open the dialog, a backdrop, and various styling elements for the dialog's content and buttons. When the "Open Dialog" button is clicked, the dialog with its content is displayed on top of the backdrop, providing a modal interaction for the user.
<CodePreview id="dialog" link="dialog#dialog" component={<HTMLDialogExamples.DialogDefault/>}
<button data-ripple-light="true" data-dialog-target="dialog"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog
</button>
<div data-dialog-backdrop="dialog" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog"
class="relative m-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div> You can set the size of the dialog on your own using the Tailwind CSS classes, check the examples below for implementation details.
<CodePreview id="dialog-sizes" link="dialog#sizes" component={<HTMLDialogExamples.DialogSizes/>}
<div class="flex gap-3 mb-3">
<button data-ripple-light="true" data-dialog-target="dialog-xs"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog XS
</button>
<div data-dialog-backdrop="dialog-xs" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-xs"
class="relative m-4 w-1/4 min-w-[25%] max-w-[25%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this
way, it took me twenty five years to get these plants, twenty five
years of blood sweat and tears, and I'm never giving up,
I'm just getting started. I'm up to something. Fan luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
<button data-ripple-light="true" data-dialog-target="dialog-sm"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog SM
</button>
<div data-dialog-backdrop="dialog-sm" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-sm"
class="relative m-4 w-1/3 min-w-[33.333333%] max-w-[33.333333%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this
way, it took me twenty five years to get these plants, twenty five
years of blood sweat and tears, and I'm never giving up,
I'm just getting started. I'm up to something. Fan luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
<button data-ripple-light="true" data-dialog-target="dialog-md"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog MD
</button>
<div data-dialog-backdrop="dialog-md" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-md"
class="relative m-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
</div>
<div class="flex gap-3 mb-3">
<button data-ripple-light="true" data-dialog-target="dialog-lg"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog LG
</button>
<div data-dialog-backdrop="dialog-lg" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-lg"
class="relative m-4 w-3/5 min-w-[60%] max-w-[60%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this
way, it took me twenty five years to get these plants, twenty five
years of blood sweat and tears, and I'm never giving up,
I'm just getting started. I'm up to something. Fan luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
<button data-ripple-light="true" data-dialog-target="dialog-xl"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog XL
</button>
<div data-dialog-backdrop="dialog-xl" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-xl"
class="relative m-4 w-3/4 min-w-[75%] max-w-[75%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this
way, it took me twenty five years to get these plants, twenty five
years of blood sweat and tears, and I'm never giving up,
I'm just getting started. I'm up to something. Fan luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
<button data-ripple-light="true" data-dialog-target="dialog-xxl"
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Open Dialog XXL
</button>
<div data-dialog-backdrop="dialog-xxl" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog-xxl"
class="relative h-screen w-screen min-w-[100vw] max-w-[100vw] bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>
</div> You can modify the open/close state animation for the modal by adding the data-dialog-mount=", {opacity-100}"data-dialog-unmount=" and {opacity-0}"data-dialog-transition=" data attributes to the dialog element. You can pass Tailwind CSS classnames for those data attributes for animating the dialog. Check more about animation data attributes for dialog here.{transition-opacity}"
<CodePreview id="custom-dialog-animation" link="dialog#custom-dialog-animation" component={<HTMLDialogExamples.DialogCustomAnimation/>}
<button
class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true" data-dialog-target="animated-dialog">
Open Dialog
</button>
<div data-dialog-backdrop="animated-dialog" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="animated-dialog" data-dialog-mount="opacity-100 translate-y-0 scale-100"
data-dialog-unmount="opacity-0 -translate-y-28 scale-90 pointer-events-none"
data-dialog-transition="transition-all duration-300"
class="relative m-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">
<div
class="flex items-center p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
Its a simple dialog.
</div>
<div
class="relative p-4 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
The key to more success is to have a lot of pillows. Put it this
way, it took me twenty five years to get these plants, twenty five
years of blood sweat and tears, and I'm never giving up,
I'm just getting started. I'm up to something. Fan luv.
</div>
<div class="flex flex-wrap items-center justify-end p-4 shrink-0 text-blue-gray-500">
<button data-ripple-dark="true" data-dialog-close="true"
class="px-6 py-3 mr-1 font-sans text-xs font-bold text-red-500 uppercase transition-all rounded-lg middle none center hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Cancel
</button>
<button data-ripple-light="true" data-dialog-close="true"
class="middle none center rounded-lg bg-gradient-to-tr from-green-600 to-green-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Confirm
</button>
</div>
</div>
</div>Use the example below to create a dialog with a Sign-in form.
<CodePreview id="dialog-with-form" link="dialog#dialog-with-form" component={<HTMLDialogExamples.DialogWithForm/>}
<button
class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button" data-dialog-target="sign-in-dialog">
Sign In
</button>
<div data-dialog-backdrop="sign-in-dialog" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="sign-in-dialog"
class="relative mx-auto flex w-full max-w-[24rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="flex flex-col gap-4 p-6">
<h4
class="block font-sans text-2xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
Sign In
</h4>
<p class="block mb-3 font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
Enter your email and password to Sign In.
</p>
<h6
class="block -mb-2 font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Your Email
</h6>
<div class="relative h-11 w-full min-w-[200px]">
<input
class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" " />
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Email
</label>
</div>
<h6
class="block -mb-2 font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Your Password
</h6>
<div class="relative h-11 w-full min-w-[200px]">
<input
class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" " />
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Password
</label>
</div>
<div class="-ml-2.5 -mt-3">
<div class="inline-flex items-center">
<label class="relative flex items-center p-3 rounded-full cursor-pointer" htmlFor="remember">
<input type="checkbox"
class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
id="remember" />
<span
class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
stroke="currentColor" stroke-width="1">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
</span>
</label>
<label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="remember">
Remember Me
</label>
</div>
</div>
</div>
<div class="p-6 pt-0">
<button
class="block w-full select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Sign In
</button>
<p class="flex justify-center mt-4 font-sans text-sm antialiased font-light leading-normal text-inherit">
Don't have an account?
<a href="#signup"
class="block ml-1 font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
Sign up
</a>
</p>
</div>
</div>
</div> Use the example below to create a modal with an image inside (you can find your images on Unsplash).
<CodePreview id="dialog-with-image" link="dialog#dialog-with-image" component={<HTMLDialogExamples.DialogWithImage/>}
<div
class="relative flex flex-col h-64 overflow-hidden text-gray-700 transition-opacity bg-white shadow-md cursor-pointer w-96 rounded-xl bg-clip-border hover:opacity-90"
data-dialog-target="image-dialog">
<img alt="nature" class="object-cover object-center w-full h-full"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80" />
</div>
<div data-dialog-backdrop="image-dialog" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div
class="relative m-4 w-3/4 min-w-[75%] max-w-[75%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl"
role="dialog" data-dialog="image-dialog">
<div
class="flex items-center justify-between p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
<div class="flex items-center gap-3">
<img alt="tania andrew"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
class="relative inline-block object-cover object-center rounded-full h-9 w-9" />
<div class="flex flex-col -mt-px">
<p class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Tania Andrew
</p>
<p class="block font-sans text-xs antialiased font-normal text-gray-700">
@canwu
</p>
</div>
</div>
<div class="flex items-center gap-2">
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-blue-gray-500 transition-all hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button" data-ripple-dark="true">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path
d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z">
</path>
</svg>
</span>
</button>
<button
class="select-none rounded-lg bg-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button" data-ripple-light="true">
Free Download
</button>
</div>
</div>
<div
class="relative p-0 font-sans text-base antialiased font-light leading-relaxed border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 text-blue-gray-500">
<img alt="nature" class="h-[48rem] w-full object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80" />
</div>
<div class="flex flex-wrap items-center justify-between p-4 shrink-0 text-blue-gray-500">
<div class="flex items-center gap-16">
<div>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
Views
</p>
<p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-900">
44,082,044
</p>
</div>
<div>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
Downloads
</p>
<p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-900">
553,031
</p>
</div>
</div>
<button
class="flex select-none items-center gap-3 rounded-lg border border-blue-gray-500 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-blue-gray-500 transition-all hover:opacity-75 focus:ring focus:ring-blue-gray-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button" data-ripple-dark="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path fill-rule="evenodd"
d="M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z"
clip-rule="evenodd"></path>
</svg>
Share
</button>
</div>
</div>
</div>Use this dialog component for connecting a Web 3.0 wallet in a web application. It features a button to open the dialog, a backdrop, wallet options, and additional informational elements.
<CodePreview id="web-3-dialog" link="dialog#web-3-dialog" component={<HTMLDialogExamples.Web3Dialog/>}
<button
class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button" data-ripple-light="true" data-dialog-target="web-3-dialog">
Connect Wallet
</button>
<div data-dialog-backdrop="web-3-dialog" data-dialog-backdrop-close="true"
class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300">
<div
class="relative m-4 w-1/4 min-w-[25%] max-w-[25%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl"
data-dialog="web-3-dialog">
<div
class="flex items-center justify-between p-4 font-sans text-2xl antialiased font-semibold leading-snug shrink-0 text-blue-gray-900">
<div>
<h5
class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
Connect a Wallet
</h5>
<p class="block font-sans text-base antialiased font-light leading-relaxed text-gray-700">
Choose which card you want to connect
</p>
</div>
<button data-ripple-dark="true" data-dialog-close="true"
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-blue-gray-500 transition-all hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div
class="relative overflow-y-scroll p-4 !px-5 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
<div class="mb-6">
<p
class="block py-3 font-sans text-base antialiased font-semibold leading-relaxed uppercase text-blue-gray-900 opacity-70">
Popular
</p>
<ul class="flex flex-col gap-1 mt-3 -ml-2">
<button role="menuitem"
class="mb-4 flex w-full cursor-pointer select-none items-center justify-center gap-3 rounded-md px-3 !py-4 pt-[9px] pb-2 text-start leading-tight shadow-md outline-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<img src="https://docs.material-tailwind.com/icons/metamask.svg" alt="metamast" class="w-6 h-6" />
<h6
class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal uppercase text-blue-gray-900">
Connect with MetaMask
</h6>
</button>
<button role="menuitem"
class="mb-1 flex w-full cursor-pointer select-none items-center justify-center gap-3 rounded-md px-3 !py-4 pt-[9px] pb-2 text-start leading-tight shadow-md outline-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<img src="https://docs.material-tailwind.com/icons/coinbase.svg" alt="metamast"
class="w-6 h-6 rounded-md" />
<h6
class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal uppercase text-blue-gray-900">
Connect with Coinbase
</h6>
</button>
</ul>
</div>
<div>
<p
class="block py-4 font-sans text-base antialiased font-semibold leading-relaxed uppercase text-blue-gray-900 opacity-70">
Other
</p>
<ul class="mt-4 -ml-2.5 flex flex-col gap-1">
<button role="menuitem"
class="mb-4 flex w-full cursor-pointer select-none items-center justify-center gap-3 rounded-md px-3 !py-4 pt-[9px] pb-2 text-start leading-tight shadow-md outline-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<img src="https://docs.material-tailwind.com/icons/trust-wallet.svg" alt="metamast"
class="border rounded-md h-7 w-7 border-blue-gray-50" />
<h6
class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal uppsecase text-blue-gray-900">
Connect with Trust Wallet
</h6>
</button>
</ul>
</div>
</div>
<div class="flex flex-wrap items-center justify-between gap-2 p-4 shrink-0 text-blue-gray-500">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
New to Ethereum wallets?
</p>
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Learn More
</button>
</div>
</div>
</div>The following data attributes are available for dialog trigger element.
| Attribute | Description |
|---|---|
data-dialog-target |
Set the dialog target element, it should be the same as the data-dialog and data-dialog-backdrop data attributes. |
data-dialog-close |
It's an optional data attribute, you can set it for any element and it will turn the element to a close trigger for dialog when click event happened on that element. |
The following data attributes are available for dialog backdrop element.
| Attribute | Description |
|---|---|
data-dialog-backdrop |
Set the dialog backdrop element, it should be the same as the data-dialog and data-dialog-target data attributes. |
data-dialog-backdrop-close |
Sets whether to close dialog when clicking on it's backdrop or not. |
The following data attributes are available for dialog element.
| Attribute | Description | Default |
|---|---|---|
data-dialog |
Set the name of the dialog and reference it to the dialog trigger and backdrop elements. |
|
data-popover-mount |
Set the classnaes that should be used when the dialog is visible. |
opacity-1translate-y-0 |
data-popover-unmount |
Set the classnaes that should be used when the dialog is hidden. |
opacity-0-translate-y-14pointer-events-none |
data-popover-transition |
Set the classnaes that should be used for transition of the dialog. |
transition-allduration-300 |
The dialog component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/dialog.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/dialog.js"></script>
• Prioritize user experience by making modals unobtrusive and easy to dismiss.
• Include clear and easily accessible close buttons, and allow users to close the modal by clicking outside it.
• Maintain a consistent design language and layout across modals to create a familiar user experience.
• Use subtle animations and transitions to open and close modals smoothly. Make sure that animations do not distract users.
• Implement validation and error handling for form elements within the modal.