JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-wrap"> 
	
	<div class="modal-content"> Content goes here </div> 
	<div class="modal-overlay"></div>
	</div>

CSS

.modal-wrap{
	  display: block;
  opacity: 1;
  position: absolute;
  top: 20%;
  padding: 0 40px;
  left: 0;
  border: none;
  right: 0;
  z-index: 9999;
}

.modal-content{
background-color: white;
  padding: 10px;
}

.modal-overlay{
	  position: fixed;
  background: black;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}