<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full h-60">
  <button type="button" command="show-modal" commandfor="modal-simple-dialog"
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Open Dialog
  </button>
</div>

<el-dialog id="modal-simple">
  <dialog id="modal-simple-dialog" aria-labelledby="changelog-title"
    class="fixed inset-0 m-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent p-0 backdrop:bg-transparent z-50">
    <el-dialog-backdrop
      class="fixed inset-0 bg-zinc-500/75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-950/50 backdrop-blur-sm"></el-dialog-backdrop>

    <div tabindex="0"
      class="flex min-h-full items-center justify-center p-4 text-center focus:outline focus:outline-0 sm:p-0">
      <el-dialog-panel
        class="relative transform overflow-hidden rounded-2xl bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 w-full sm:max-w-3xl sm:p-8 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 dark:bg-zinc-900 dark:outline dark:outline-1 dark:-outline-offset-1 dark:outline-zinc-800">
        <div class="absolute right-0 top-0 block pr-4 pt-4">
          <button type="button" command="close" commandfor="modal-simple-dialog"
            class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-600 dark:bg-zinc-900 dark:hover:text-gray-300 dark:focus:outline-primary-400">
            <span class="sr-only">Close</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon"
              aria-hidden="true" class="size-6">
              <path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
        </div>
        <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">Dialog-Title</h3>
        <div class="mt-5 sm:mt-4 flex flex-col w-full">
          <!-- Dialog Content -->
        </div>
      </el-dialog-panel>
    </div>
  </dialog>
</el-dialog>