JSFiddle - React, Tailwind, and code Playground

HTML

<dialog>I am a dialog</dialog>

<p><button type="button" id="demo_00">Open dialog</button></p>
<p><button type="button" id="demo_01">Open dialog as Modal</button></p>
<p><button type="button" id="demo_02">Close dialog</button></p>

CSS

dialog {
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
}

dialog::backdrop {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.4);
}

JavaScript

var dialog = document.querySelector('dialog');

document.querySelector('#demo_00').addEventListener('click', function() {
    dialog.show();
});
document.querySelector('#demo_01').addEventListener('click', function() {
    dialog.showModal();
});
document.querySelector('#demo_02').addEventListener('click', function() {
    dialog.close();
});