JSFiddle - React, Tailwind, and code Playground

HTML

<dialog id="dialogDemo">
  Hey! This is a dialog box.
  <button id="closeDialog">Close dialog</button>
</dialog>
<menu>
  <button id="openDialog">Open dialog</button>
</menu>

CSS

dialog {
  border: none;
  box-shadow: #00000029 4px 2px 4px 6px;
  border-radius: 10px;
  padding: 30px;
  background-color: aqua;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
}

JavaScript

var openDialogButton = document.getElementById('openDialog');
var dialogDemo = document.getElementById('dialogDemo');
var closeDialogButton = document.getElementById('closeDialog');

openDialogButton.addEventListener('click', function () {
  if (typeof dialogDemo.showModal === "function") {
    dialogDemo.showModal();
  } else {
    console.log("The <dialog> API is not supported by this browser");
  }
});
closeDialogButton.addEventListener('click', function() {
  dialogDemo.close();
})