JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu__button" id="menu_button">open modal</div>               
      
            <div class="menu-wrapper" id="topMenuWindow">
                <div class="menu-window">
                    <centre>CONTENT HERE</centre>
                </div>
            </div>

CSS

.menu-button {
  color:red;
  z-index:10;
}
.menu-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    
    position: fixed;
    top: 0; left: 0;
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.1);
    display: none;
}
.menu-window {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background:white;
    max-width: 50%;
    max-height: 50%;
    margin:auto;
    margin-text:centre;
    text-align:centre;
    vertical-align:middle;
    display:normal;
    position:relative;
    top: 50%;
  transform: translateY(-10%)
}

JavaScript

(function () {
   var topMenuButton = document.querySelector("#menu_button");
   var topMenuWindow = document.querySelector('#topMenuWindow');

    topMenuButton.addEventListener('click', topMenuButtonChange);

    function topMenuButtonChange() {       
       topMenuShow();
    }

    function topMenuShow() {
        topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "block";
    }



})();