Tailwind CSS Dialog
Use our Tailwind CSS dialog 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 dialog example that you can use for your Tailwind CSS 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.
Its a simple dialog.
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.
<button
data-ripple-light="true"
data-dialog-target="dialog"
class="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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>Dialog Sizes
You can set the size of the dialog by your own using the tailwind css classes, check the below examples for more details.
Its a simple dialog.
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.
Its a simple dialog.
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.
Its a simple dialog.
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.
Its a simple dialog.
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.
Its a simple dialog.
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.
Its a simple dialog.
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 class="mb-3 flex gap-3">
<button
data-ripple-light="true"
data-dialog-target="dialog-xs"
class="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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="mb-3 flex gap-3">
<button
data-ripple-light="true"
data-dialog-target="dialog-lg"
class="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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>Custom Dialog Animation
You can modify the open/close state animation for dialog 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. {transition-opacity}"
Check more about animation data attributes for dialog here.
Its a simple dialog.
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.
<button
class="middle none center mr-4 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
Its a simple dialog.
</div>
<div class="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
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 shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
<button
data-ripple-dark="true"
data-dialog-close="true"
class="middle none center mr-1 rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-red-500 transition-all 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>Dialog with Form
Use the example below to create a dialog with a sign in form.
<button
class="select-none rounded-lg bg-pink-500 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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="relative mx-4 -mt-6 mb-4 grid h-28 place-items-center overflow-hidden rounded-xl bg-gradient-to-tr from-pink-600 to-pink-400 bg-clip-border text-white shadow-lg shadow-pink-500/40">
<h3 class="block font-sans text-3xl font-semibold leading-snug tracking-normal text-white antialiased">
Sign In
</h3>
</div>
<div class="flex flex-col gap-4 p-6">
<div class="relative h-11 w-full min-w-[200px]">
<input
class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" "
/>
<label class="behtmlFore:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 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-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-pink-500 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>
<div class="relative h-11 w-full min-w-[200px]">
<input
class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 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 text-[11px] font-normal leading-tight text-blue-gray-400 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-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-pink-500 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">
<div class="inline-flex items-center">
<label
class="relative flex cursor-pointer items-center rounded-full p-3"
for="checkbox"
data-ripple-dark="true"
>
<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-pink-500 checked:bg-pink-500 checked:before:bg-pink-500 hover:before:opacity-10"
id="checkbox"
/>
<span class="pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity 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 cursor-pointer select-none font-light text-gray-700"
for="checkbox"
>
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-pink-600 to-pink-400 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
Sign In
</button>
<p class="mt-6 flex justify-center font-sans text-sm font-light leading-normal text-inherit antialiased">
Don't have an account?
<a
href="#signup"
class="ml-1 block font-sans text-sm font-bold leading-normal text-pink-500 antialiased"
>
Sign up
</a>
</p>
</div>
</div>
</div>Dialog with Image
Use the example below to create a dialog with an image inside, similar to unsplash.
Tania Andrew
@canwu
Views
44,082,044
Downloads
553,031
<div
className="relative flex h-64 w-96 cursor-pointer flex-col overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-md transition-opacity hover:opacity-90"
data-dialog-target="image-dialog"
>
<img
alt="nature"
className="h-full 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
data-dialog-backdrop="image-dialog"
data-dialog-backdrop-close="true"
className="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
className="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 className="flex shrink-0 items-center justify-between p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
<div className="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"
className="relative inline-block h-9 w-9 rounded-full object-cover object-center"
/>
<div className="-mt-px flex flex-col">
<p className="block font-sans text-sm font-medium leading-normal text-blue-gray-900 antialiased">
Tania Andrew
</p>
<p className="block font-sans text-xs font-normal text-gray-700 antialiased">
@canwu
</p>
</div>
</div>
<div className="flex items-center gap-2">
<button
className="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 className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
className="h-5 w-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
className="select-none rounded-lg bg-green-500 py-2 px-4 text-center align-middle 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 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 className="relative border-t border-b border-t-blue-gray-100 border-b-blue-gray-100 p-0 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
<img
alt="nature"
className="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 className="flex shrink-0 flex-wrap items-center justify-between p-4 text-blue-gray-500">
<div className="flex items-center gap-16">
<div>
<p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
Views
</p>
<p className="block font-sans text-base font-medium leading-relaxed text-blue-gray-900 antialiased">
44,082,044
</p>
</div>
<div>
<p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
Downloads
</p>
<p className="block font-sans text-base font-medium leading-relaxed text-blue-gray-900 antialiased">
553,031
</p>
</div>
</div>
<button
className="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"
className="h-4 w-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>Web 3.0 Dialog
Use the example below to create a Web 3.0 wallet connect dialog.
Connect a Wallet
Popular
More
New to Ethereum wallets?
<button
class="select-none rounded-lg bg-pink-500 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 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 bg-white m-4 rounded-lg shadow-2xl text-blue-gray-500 antialiased font-sans text-base font-light leading-relaxed w-1/4 min-w-[25%] max-w-[25%]"
data-dialog="web-3-dialog"
>
<div
class="flex items-center shrink-0 p-4 text-blue-gray-900 antialiased font-sans text-2xl font-semibold leading-snug justify-between"
>
<h5
class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900"
>
Connect a Wallet
</h5>
<button
class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30"
type="button"
data-ripple-dark="true"
data-dialog-close="true"
>
<span
class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</button>
</div>
<div
class="relative p-4 text-blue-gray-500 antialiased font-sans text-base font-light leading-relaxed overflow-y-scroll pr-2"
>
<div class="mb-6">
<p
class="block antialiased font-sans text-sm leading-normal text-gray-700 font-semibold opacity-70"
>
Popular
</p>
<ul class="mt-1 -ml-2 flex flex-col gap-1">
<button
role="menuitem"
class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3"
>
<img src="/icons/metamask.svg" alt="metamast" class="h-6 w-6" />
<h6
class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900"
>
MetaMask
</h6>
</button>
<button
role="menuitem"
class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3"
>
<img
src="/icons/coinbase.svg"
alt="metamast"
class="h-6 w-6 rounded-md"
/>
<h6
class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900"
>
Coinbase Wallet
</h6>
</button>
<button
role="menuitem"
class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3"
>
<img
src="/icons/connect-wallet.svg"
alt="metamast"
class="h-6 w-6 rounded-md"
/>
<h6
class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900"
>
Connect Wallet
</h6>
</button>
</ul>
</div>
<div>
<p
class="block antialiased font-sans text-sm leading-normal text-gray-700 font-semibold opacity-70"
>
More
</p>
<ul class="mt-1 -ml-2.5 flex flex-col gap-1">
<button
role="menuitem"
class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3"
>
<img
src="/icons/trust-wallet.svg"
alt="metamast"
class="h-7 w-7 rounded-md border border-blue-gray-50"
/>
<h6
class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900"
>
Trust Wallet
</h6>
</button>
<button
role="menuitem"
class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3"
>
<img
src="/icons/argent-wallet.svg"
alt="metamast"
class="h-7 w-7 rounded-md border border-blue-gray-50"
/>
<h6
class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900"
>
Coinbase Wallet
</h6>
</button>
</ul>
</div>
</div>
<div
class="flex items-center shrink-0 flex-wrap p-4 text-blue-gray-500 justify-between gap-2 border-t border-blue-gray-50"
>
<p
class="block antialiased font-sans text-sm leading-normal text-gray-700 font-normal"
>
New to Ethereum wallets?
</p>
<button
class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-pink-500 hover:bg-pink-500/10 active:bg-pink-500/30"
type="button"
data-ripple-dark="true"
>
Learn More
</button>
</div>
</div>
</div>Dialog Trigger Data Attributes
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. |
Dialog Backdrop Data Attributes
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. |
Dialog Data Attributes
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 |
Required Scrips
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>