JSFiddle - React, Tailwind, and code Playground

HTML

<input type="submit" value="submit" onclick="test()"/>
<div class="popup">
    <p id="msg">Click OK to do something cool.</p>
    <button id="ok">OK</button><button id="cancel">Cancel</button>
</div>
<script>
    var popup = document.querySelector('.popup');
    var cancel = document.getElementById('cancel');
    var ok = document.getElementById('ok');
    var msg = document.getElementById('msg');
    var initMsg= msg.innerHTML;
    
    ok.addEventListener('click', function(){
        msg.innerHTML = 'You Clicked Ok';
    });
    cancel.addEventListener('click', function(){
        msg.innerHTML = initMsg;
        popup.style.display = 'none';
    });
    
    function test(){

    popup.style.display = 'block';

    
}
    
</script>

CSS

.popup{
        display: none;
        position: absolute;
        width: 400px;
        height: 150px;
        background: #f8f8f8;
        border: 1px solid #e9e9e9;
        box-shadow: 0px 0px 3px #888;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;  
        padding: 10px;
        box-sizing:border-box;
    }

    .popup button{
        font-weight: bold;       
    
    }