JSFiddle - React, Tailwind, and code Playground
HTML
<dialog>
<p>This is da dialog!</p>
<button id="close">Close</button>
</dialog>
<button id="show">Open Dialog!</button>
CSS
dialog {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
JavaScript
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};