JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="show-modal-window" value="show modal window">
<input type="button" id="show-window" value="show window">

 <div id="modal-window-sample" class="modal-window" >
  <div id='modal-head' class="modal-head"><h2>Hello</h2></div>
  <div id='modal-body' class="modal-body">I am modal window!</div>
  <div id='modal-footer' class = "modal-footer">
   <span class='modal-button close-button'>Close me</span>
  </div>

CSS

.modal-window {
  
  display: none;
   width: 300px;
  
   background-color: white;
   z-index: 100000;
   -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #808080;

  margin: 0;
  color: #808080;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  background-color: #FFFFFF;
  border: 1px solid #EAEEFA;
  border: 1px solid rgba(234, 238, 250, 0.6);
 
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.modal-head {
  padding: 5px 15px;
  margin: 0;
}

.modal-head h2 {

  text-align: center;
}


.modal-body {
  padding: 40px;
  font-size: 15px;
  text-align: center;
   border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;

}

.modal-footer {
  display: block;
  background-color: #F5F5F5;
  padding: 10px 11px 11px;
  border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;
  zoom: 1;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  font-family:arial;
  font-size: 15px;
  
}

</style>

<link href="http://cyberua.github.io/modal/modal-default.css" type="text/css" rel="stylesheet">
<script src="http://cyberua.github.io/modal/modal.min.js"></script>

JavaScript

var show_modal = document.getElementById("show-modal-window");
var show_window = document.getElementById("show-window");

var modal = new ModalJS({
    window: document.getElementById('modal-window-sample'),
    closeButtonCls: "close-button"
});

modal.onclose = function () {
    // if returned true, modal will close
    return isModal;
}


show_modal.addEventListener("click", function () {
    isModal = true;
    modal.overlay.removeEventListener("click", modalClose);
    modal.show();
});

show_window.addEventListener("click", function () {
    //close window if clicked overlay
    isModal = false;
    modal.show();
});

function modalClose() {
    modal.hide();
}