<div class="h-screen flex items-center justify-center">

  <button onclick="showDialog()" class="bg-green-500 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 transition">
    Open Dialog
  </button>

  <dialog id="myDialog" class="rounded-lg p-6 text-center shadow-lg shadow-slate-900 bg-white py-8">
    <div class="text-3xl">Welcome to <b>The Syntax Diaries</b></div>

    <p class="py-4">This is a simple HTML dialog</p>
    <div>
      <button onclick="closeDialog()" class="bg-green-500 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 transition">
        Close
      </button>
      <div>
  </dialog>
</div>

 dialog::backdrop {
        background-image: linear-gradient(
  45deg,
  hsl(240deg 100% 20%) 0%,
  hsl(289deg 100% 21%) 11%,
  hsl(315deg 100% 27%) 22%,
  hsl(329deg 100% 36%) 33%,
  hsl(337deg 100% 43%) 44%,
  hsl(357deg 91% 59%) 56%,
  hsl(17deg 100% 59%) 67%,
  hsl(34deg 100% 53%) 78%,
  hsl(45deg 100% 50%) 89%,
  hsl(55deg 100% 50%) 100%
);

const dialog = document.getElementById("myDialog");

function showDialog() {
  dialog.showModal();
}

function closeDialog() {
  dialog.close();
}