JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
    <div id="close">X</div>
    <p>This is a dialog that is supposed to slide down and up</p>
</div>
<div>
    <p>Click here to see the dialog: <button onclick="showMyDialog(); return true;">Show dialog</button></p>
</div>

CSS

#dialog{
    display:none;
    position:absolute;
    top:-5%;
    left:10%;
    opacity:0;
    padding:20px;
    background-color:white;
    border:1px solid black;
    border-radius:5px;
    box-shadow:0 3px 7px rgba(0,0,0,.3);
    transition:opacity .3s linear, top .3s ease-out;
    -webkit-transition:opacity .3s linear, top .3s ease-out;
    -moz-transition:opacity .3s linear, top .3s ease-out;
    -ms-transition:opacity .3s linear, top .3s ease-out;
}
#close{
    float: right;
    margin: 5px;
    cursor:pointer;
    border:1px solid black;
    border-radius:3px;
    background-color:#eee;
    padding:3px;
}

JavaScript

window.listenersSet = false;
window.dialogShouldBeVisible = false;

window.showMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    if (!listenersSet) {
        if (!window.addEventListener) { // IE8 has no addEventListener
            myclose.attachEvent('onclick', function () {
                hideMyDialog();
            });
        } else {
            myClose.addEventListener('click', function () {
                hideMyDialog()
            });
            
            ['webkitTransitionEnd','oTransitionEnd', 'otransitionend', 'transitionend'].forEach(function (eventName) {
                myDialog.addEventListener(eventName, function (e) {
                    if (e.target === myDialog && e.propertyName === 'top') { // only do trigger if it is the top transition of the modalDialog that has ended
                        if (!dialogShouldBeVisible) {
                            myDialog.style.display = 'none';
                            e.stopPropagation();
                        }
                    }
                });
            });
        }
        listenersSet = true;
    }
    
    myDialog.style.display = 'block';
    myDialog.style.top = '15px';
    myDialog.style.opacity = '1';
    dialogShouldBeVisible = true;
}

window.hideMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    myDialog.style.top = '-5%';
    myDialog.style.opacity = '0.1';
    dialogShouldBeVisible = false;
}