JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<dialog id="dialog" class="dialog" open>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>

<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>

CSS

.dialog {
  width: 200px;
  /* position: fixed; */
  top: 50px;
  border: 3px solid purple;
}

JavaScript

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

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});