JSFiddle - React, Tailwind, and code Playground

HTML

<dialog id="myDialog">
    <p>
        <q>The world is full of magical things patiently waiting for our wits to grow sharper.</q>
        <cite>Bertrand Russell</cite>
    </p>
    <button id="hide">Close</button>
</dialog>

<button id="show">Show Dialog</button>

CSS

#myDialog {
    width:50%;
    background-color:#F4FFEF;
    border:1px dotted black;
}

JavaScript

var dialog = document.getElementById('myDialog');  
document.getElementById('show').onclick = function() {  
    dialog.showModal();  
};  
document.getElementById('hide').onclick = function() {  
    dialog.close();  
};