JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

<dialog id="favDialog">
  <h4 id="closeButton">x</h4>
  <h1>This is some text</h1>
</dialog>

<button id="btnDialog">Click me</button>

CSS

#closeButton {
  position: absolute;
  right: 15px;
  top: 15px;
}

JavaScript

var btn = document.getElementById("btnDialog");
var closeBtn = document.getElementById("closeButton");
var dialog = document.getElementById("favDialog");

btn.addEventListener("click", function() {
	dialog.showModal();
});

closeBtn.addEventListener("click", function() {
	dialog.close();
});