JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>
<div id="modal">
  <div id="content">
    <p>Hello World Bhayu Dewantara!</p>
  </div>
</div>

CSS

#overlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 99;
}

#modal {
  position: absolute;
  background: rgba(0,0,0,0.2);
  border-radius: 14px;
  padding: 8px;
  z-index: 100;
  text-align: center;
  font-size: 18px;
}

#content {
  border-radius: 8px;
  background: #fff;
  padding: 20px;
}

JavaScript

// modal overlay
var top, left;

top = Math.max($(window).height() - $("#modal").outerHeight(), 0) / 2;
left = Math.max($(window).width() - $("#modal").outerWidth(), 0) / 2;

$("#modal").css({
     top:top + $(window).scrollTop(), 
     left:left + $(window).scrollLeft()
});