Tailwind CSS Dialog/Modal

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="{dialog}" data attribute to the trigger element, the data-dialog-backdrop="{dialogName}" to the backdrop element and the
data-dialog="{dialogName}" to the dialog element itself and make sure that the values for those data attributes are the same.

You can also use the data-dialog-close="true" for the element that you want to close the dialog with when clicking.

Dialog Examples:

Default Dialog

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.

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="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&apos;m never giving up, I&apos;m just getting started. I&apos;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>

Dialog Sizes

You can set the size of the dialog on your own using the Tailwind CSS classes, check the examples below for implementation details.

Its a simple dialog.

  <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&apos;m never giving up,
          I&apos;m just getting started. I&apos;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&apos;m never giving up,
          I&apos;m just getting started. I&apos;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&apos;m never giving up, I&apos;m just getting started. I&apos;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&apos;m never giving up,
          I&apos;m just getting started. I&apos;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&apos;m never giving up,
          I&apos;m just getting started. I&apos;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&apos;m never giving up, I&apos;m just getting started. I&apos;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>

Custom Dialog Animation

You can modify the open/close state animation for the modal by adding the data-dialog-mount="{opacity-100}", data-dialog-unmount="{opacity-0}" and data-dialog-transition="{transition-opacity}" 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.

Its a simple dialog.

  <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&apos;m never giving up,
        I&apos;m just getting started. I&apos;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>

Dialog with Form

Use the example below to create a dialog with a Sign-in form.

Sign In

Enter your email and password to Sign In.

Your Email

Your Password

Password

Remember Me

Don't have an account?Sign up

 <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&apos;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>

Dialog with Image

Use the example below to create a modal with an image inside (you can find your images on Unsplash).

  <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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2717&amp;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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;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">
              @andrew
            </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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2717&amp;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>

Web 3.0 Dialog

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.

Connect a Wallet

Choose which card you want to connect

Popular

Other

New to Ethereum wallets?

  <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>

Manage Item

Keep your records up-to-date and organized.

Name

eg. White Shoes

Delivery Method

Please select your preferred delivery method for your order.

Standard Delivery

5-7 business days. Free

Express Delivery

2-3 business days. $10.00

Pickup In-Store

Available for pickup within 24 hours. Free

  <button
        data-ripple-light="true"
        data-dialog-target="delivery-method-dialog"
        className="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 px-6 py-3 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"
      >
        Delivery Method Dialog
      </button>
      <div
        data-dialog-backdrop="delivery-method-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
          data-dialog="delivery-method-dialog"
          className="relative m-4 mx-auto flex w-full max-w-[33.2rem] flex-col rounded-lg bg-white p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl"
        >
          <div className="relative m-0 block shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
            <h4 className="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
              Delivery Method
            </h4>
            <p className="mt-1 block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
              Please select your preferred delivery method for your order.
            </p>
            <button
              className="!absolute right-3.5 top-3.5 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-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              type="button"
              data-ripple-dark="true"
              data-dialog-close="true"
            >
              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  className="h-4 w-4 stroke-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18 18 6M6 6l12 12"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
          <div className="relative p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
            <div className="space-y-4">
              <div>
                <input
                  type="radio"
                  id="standard"
                  name="hosting"
                  className="peer hidden"
                  value="standard"
                />
                <label
                  htmlFor="standard"
                  className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
                >
                  <div className="block">
                    <p className="block font-sans text-base font-semibold leading-relaxed text-inherit antialiased">
                      Standard Delivery
                    </p>
                    <p className="block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      5-7 business days.{" "}
                      <strong className="text-gray-900">Free</strong>
                    </p>
                  </div>
                </label>
              </div>
              <div>
                <input
                  type="radio"
                  id="express"
                  name="hosting"
                  className="peer hidden"
                  value="express"
                  defaultChecked
                />
                <label
                  htmlFor="express"
                  className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
                >
                  <div className="block">
                    <p className="block font-sans text-base font-semibold leading-relaxed text-inherit antialiased">
                      Express Delivery
                    </p>
                    <p className="block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      2-3 business days.{" "}
                      <strong className="text-gray-900">$10.00</strong>
                    </p>
                  </div>
                </label>
              </div>
              <div>
                <input
                  type="radio"
                  id="store"
                  name="hosting"
                  className="peer hidden"
                  value="store"
                />
                <label
                  htmlFor="store"
                  className="block w-full cursor-pointer rounded-lg border border-gray-300 p-4 text-gray-900 ring-1 ring-transparent peer-checked:border-gray-900 peer-checked:ring-gray-900"
                >
                  <div className="block">
                    <p className="block font-sans text-base font-semibold leading-relaxed text-inherit antialiased">
                      Pickup In-Store
                    </p>
                    <p className="block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      Available for pickup within 24 hours.{" "}
                      <strong className="text-gray-900">Free</strong>
                    </p>
                  </div>
                </label>
              </div>
            </div>
          </div>
          <div className="flex shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
            <button
              className="ml-auto select-none rounded-lg bg-gray-900 px-6 py-3 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-close="true"
            >
              confirm delivery method
            </button>
          </div>
        </div>
      </div>

Select Categories

Categories help you organize your contacts based on their interests and interactions.

Updates

Receive the latest news and updates.

Leads

Potential clients and interested parties.

Webinars

Interested in attending webinars and online events.

      <button
        data-ripple-light="true"
        data-dialog-target="select-categories-dialog"
        className="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 px-6 py-3 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"
      >
        Select Categories Dialog
      </button>
      <div
        data-dialog-backdrop="select-categories-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
          data-dialog="select-categories-dialog"
          className="relative m-4 mx-auto flex w-full max-w-[33.2rem] flex-col rounded-lg bg-white p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl"
        >
          <div className="relative m-0 block shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
            <h4 className="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
              Select Categories
            </h4>
            <p className="mt-1 block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
              Categories help you organize your contacts based on their
              interests and interactions.
            </p>
            <button
              className="!absolute right-3.5 top-3.5 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-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              type="button"
              data-ripple-dark="true"
              data-dialog-close="true"
            >
              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  className="h-4 w-4 stroke-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18 18 6M6 6l12 12"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
          <div className="relative space-y-4 p-4 px-2 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
            <div className="inline-flex items-center">
              <label
                className="relative -mt-5 flex cursor-pointer items-center rounded-full p-3"
                htmlFor="ripple-on"
                data-ripple-dark="true"
              >
                <input
                  type="checkbox"
                  className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-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="ripple-on"
                />
                <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="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
                className="mt-px cursor-pointer select-none font-light text-gray-700"
                htmlFor=":r6:"
              >
                <div>
                  <p className="block font-sans text-base font-medium text-blue-gray-900 antialiased">
                    Updates
                  </p>
                  <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
                    Receive the latest news and updates.
                  </p>
                </div>
              </label>
            </div>
            <div className="inline-flex items-center">
              <label
                className="relative -mt-5 flex cursor-pointer items-center rounded-full p-3"
                htmlFor="ripple-on2"
                data-ripple-dark="true"
              >
                <input
                  type="checkbox"
                  className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-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="ripple-on2"
                />
                <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="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
                className="mt-px cursor-pointer select-none font-light text-gray-700"
                htmlFor=":r7:"
              >
                <div>
                  <p className="block font-sans text-base font-medium leading-relaxed text-blue-gray-900 antialiased">
                    Leads
                  </p>
                  <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
                    Potential clients and interested parties.
                  </p>
                </div>
              </label>
            </div>
            <div className="inline-flex items-center">
              <label
                className="relative -mt-5 flex cursor-pointer items-center rounded-full p-3"
                htmlFor="ripple-on3"
                data-ripple-dark="true"
              >
                <input
                  type="checkbox"
                  className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-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="ripple-on3"
                />
                <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="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
                className="mt-px cursor-pointer select-none font-light text-gray-700"
                htmlFor=":r8:"
              >
                <div>
                  <p className="block font-sans text-base font-medium leading-relaxed text-blue-gray-900 antialiased">
                    Webinars
                  </p>
                  <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
                    Interested in attending webinars and online events.
                  </p>
                </div>
              </label>
            </div>
          </div>
          <div className="flex shrink-0 flex-wrap items-center justify-end p-4 text-blue-gray-500">
            <button
              className="ml-auto select-none rounded-lg bg-gray-900 px-6 py-3 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-close="true"
            >
              save categories
            </button>
          </div>
        </div>
      </div>

Order Details

Please select your preferred delivery method for your order.

$2,400, Design Changes
22 Dec 6:20 PM
New order #1832412
21 Dec 8:20 PM
Payment Completed
17 Dec 4:20 PM

     <button
        data-ripple-light="true"
        data-dialog-target="order-details-dialog"
        className="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 px-6 py-3 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"
      >
        Order Details Dialog
      </button>
      <div
        data-dialog-backdrop="order-details-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
          data-dialog="order-details-dialog"
          className="relative m-4 mx-auto flex w-full max-w-[33.2rem] flex-col rounded-lg bg-white p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl"
        >
          <div className="relative m-0 block shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
            <h4 className="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
              Order Details
            </h4>
            <p className="mt-1 block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
              Please select your preferred delivery method for your order.
            </p>
            <button
              className="!absolute right-3.5 top-3.5 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-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              type="button"
              data-ripple-dark="true"
              data-dialog-close="true"
            >
              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  className="h-4 w-4 stroke-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18 18 6M6 6l12 12"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
          <div className="relative mx-2 p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
            <ul className="flex w-full flex-col">
              <li className="relative flex flex-col gap-2">
                <span className="absolute left-0 grid justify-center bg-transparent transition-opacity duration-200">
                  <span className="h-full w-0.5 bg-blue-gray-100"></span>
                </span>
                <div className="flex items-center gap-4">
                  <span className="relative z-[2] w-max flex-shrink-0 overflow-hidden rounded-full bg-gray-900 p-2 text-white">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      aria-hidden="true"
                      data-slot="icon"
                      className="h-4 w-4"
                    >
                      <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"></path>
                      <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"></path>
                    </svg>
                  </span>
                  <p className="block font-sans text-base font-semibold leading-relaxed text-blue-gray-900 antialiased">
                    $2,400, Design Changes
                  </p>
                </div>
                <div className="-mt-2 flex gap-4 pb-8">
                  <span className="pointer-events-none invisible h-full flex-shrink-0"></span>
                  <div>
                    <p className="block pl-8 font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      22 Dec 6:20 PM
                    </p>
                  </div>
                </div>
              </li>
              <li className="relative flex flex-col gap-2">
                <span className="absolute left-0 grid justify-center bg-transparent transition-opacity duration-200">
                  <span className="h-full w-0.5 bg-blue-gray-100"></span>
                </span>
                <div className="flex items-center gap-4">
                  <span className="relative z-[2] w-max flex-shrink-0 overflow-hidden rounded-full bg-gray-900 p-2 text-white">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      aria-hidden="true"
                      data-slot="icon"
                      className="h-4 w-4"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
                        clip-rule="evenodd"
                      ></path>
                    </svg>
                  </span>
                  <p className="block font-sans text-base font-semibold leading-relaxed text-blue-gray-900 antialiased">
                    New order #1832412
                  </p>
                </div>
                <div className="-mt-2 flex gap-4 pb-8">
                  <span className="pointer-events-none invisible h-full flex-shrink-0"></span>
                  <div>
                    <p className="block pl-8 font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      21 Dec 8:20 PM
                    </p>
                  </div>
                </div>
              </li>
              <li className="relative flex flex-col gap-2">
                <span className="absolute left-0 grid justify-center bg-transparent transition-opacity duration-200">
                  <span className="h-full w-0.5 bg-blue-gray-100"></span>
                </span>
                <div className="flex items-center gap-4">
                  <span className="relative z-[2] w-max flex-shrink-0 overflow-hidden rounded-full bg-gray-900 p-2 text-white">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      aria-hidden="true"
                      data-slot="icon"
                      className="h-4 w-4"
                    >
                      <path d="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z"></path>
                      <path
                        fill-rule="evenodd"
                        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v.816a3.836 3.836 0 0 0-1.72.756c-.712.566-1.112 1.35-1.112 2.178 0 .829.4 1.612 1.113 2.178.502.4 1.102.647 1.719.756v2.978a2.536 2.536 0 0 1-.921-.421l-.879-.66a.75.75 0 0 0-.9 1.2l.879.66c.533.4 1.169.645 1.821.75V18a.75.75 0 0 0 1.5 0v-.81a4.124 4.124 0 0 0 1.821-.749c.745-.559 1.179-1.344 1.179-2.191 0-.847-.434-1.632-1.179-2.191a4.122 4.122 0 0 0-1.821-.75V8.354c.29.082.559.213.786.393l.415.33a.75.75 0 0 0 .933-1.175l-.415-.33a3.836 3.836 0 0 0-1.719-.755V6Z"
                        clip-rule="evenodd"
                      ></path>
                    </svg>
                  </span>
                  <p className="block font-sans text-base font-semibold leading-relaxed text-blue-gray-900 antialiased">
                    Payment Completed
                  </p>
                </div>
                <div className="-mt-2 flex gap-4">
                  <span className="pointer-events-none invisible h-full flex-shrink-0"></span>
                  <div>
                    <p className="block pl-8 font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                      17 Dec 4:20 PM
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div className="flex shrink-0 flex-wrap items-center justify-end text-blue-gray-500">
            <button
              className="mr-auto select-none rounded-lg bg-gray-900 px-6 py-3 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-close="true"
            >
              more details
            </button>
          </div>
        </div>
      </div>

Upload Progress

Please wait while we process your request. You can track the upload progress below.

Uploading...

50%

File Name

project_proposal.pdf

File Size

10 MB

Closing this window may interrupt the upload process.

      <button
        data-ripple-light="true"
        data-dialog-target="upload-progress-dialog"
        className="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 px-6 py-3 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"
      >
        Upload Progress Dialog
      </button>
      <div
        data-dialog-backdrop="upload-progress-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
          data-dialog="upload-progress-dialog"
          className="relative m-4 w-full min-w-[33.3%] rounded-lg bg-white p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl md:max-w-[39.8rem]"
        >
          <div className="relative m-0 block shrink-0 items-center p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
            <h4 className="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
              Upload Progress
            </h4>
            <p className="mt-1 block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
              Please wait while we process your request. You can track the
              upload progress below.
            </p>
            <button
              className="!absolute right-3.5 top-3.5 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-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              type="button"
              data-ripple-dark="true"
              data-dialog-close="true"
            >
              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  className="h-4 w-4 stroke-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18 18 6M6 6l12 12"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
          <div className="relative p-4 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased">
            <div className="w-full">
              <div className="mb-2 flex items-center justify-between gap-4">
                <p className="block font-sans text-sm font-semibold leading-relaxed tracking-normal text-blue-gray-900 antialiased">
                  Uploading...
                </p>
                <p className="block font-sans text-sm font-semibold leading-relaxed tracking-normal text-blue-gray-900 antialiased">
                  50%
                </p>
              </div>
              <div className="flex-start flex h-2.5 w-full overflow-hidden rounded-full bg-blue-gray-50 font-sans text-xs font-medium">
                <div className="flex h-full w-1/2 items-center justify-center overflow-hidden break-all rounded-full bg-gray-900 text-white"></div>
              </div>
            </div>
            <div className="mt-6 flex gap-16">
              <div>
                <p className="block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                  File Name
                </p>
                <p className="block font-sans text-base font-semibold leading-relaxed text-blue-gray-900 antialiased">
                  project_proposal.pdf
                </p>
              </div>
              <div>
                <p className="block font-sans text-base font-normal leading-relaxed text-gray-600 antialiased">
                  File Size
                </p>
                <p className="block font-sans text-base font-semibold leading-relaxed text-blue-gray-900 antialiased">
                  10 MB
                </p>
              </div>
            </div>
          </div>
          <div className="flex shrink-0 flex-wrap items-center justify-between gap-4 p-4 text-blue-gray-500">
            <p className="flex gap-2 font-sans text-sm font-normal leading-normal text-gray-600 antialiased md:items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
                className="h-5 w-5 text-gray-900"
              >
                <path
                  fill-rule="evenodd"
                  d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              Closing this window may interrupt the upload process.
            </p>
            <button
              className="w-full select-none rounded-lg bg-gray-900 px-6 py-3 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 lg:max-w-fit"
              type="button"
              data-ripple-light="true"
              data-dialog-close="true"
            >
              cancel upload
            </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-1` `translate-y-0`
`data-popover-unmount`	Set the classnaes that should be used when the dialog is hidden.	`opacity-0` `-translate-y-14` `pointer-events-none`
`data-popover-transition`	Set the classnaes that should be used for transition of the dialog.	`transition-all` `duration-300`

Required Scripts

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>

Modal Best Practices for Developers

• 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.