JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"></div>
<div class="popup">
  <h1>Hello world!</h1>
</div>




<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa purus, mollis ac mauris a, maximus accumsan odio. Proin vulputate ante lacus, sit amet viverra dui laoreet non. Vivamus feugiat convallis augue ut volutpat. Phasellus ac libero facilisis, bibendum tellus sed, consectetur lacus. Ut faucibus aliquet nisl vel pellentesque. Aenean vitae gravida neque. In id congue purus, convallis tristique nisl.</p>
<p>Vivamus in massa vel mauris pharetra dignissim eget vitae tortor. Cras dictum mi mi, vulputate vehicula nunc molestie id. Sed justo orci, faucibus non blandit at, aliquet quis augue. Duis blandit feugiat tortor a porttitor. Proin gravida commodo lorem, at blandit neque. Nullam mollis augue vitae nunc tempus, in hendrerit ex pulvinar. Duis lacinia tincidunt magna vitae finibus. Integer condimentum lorem et lorem hendrerit, eu pretium erat porta. Donec enim sapien, mollis quis dui non, tempus tristique nisl. In ut bibendum erat.</p>

CSS

.overlay {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: black;
  opacity: .7;
}

.popup {
  position: absolute;
  background: white;
  opacity: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}