JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<body class="noscroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati iure ut nisi, quas incidunt esse ad? Itaque voluptatum sint natus omnis vero molestias mollitia libero animi, temporibus ullam doloremque quasi saepe, a soluta aut unde, rem at quam delectus illo tenetur praesentium iusto nobis rerum! Iste ab recusandae quam quisquam voluptatum, adipisci tenetur quaerat error consectetur, animi repellat labore repellendus reprehenderit fugit eligendi blanditiis! Rerum itaque natus, id quae dolorum nobis fugit necessitatibus atque, placeat commodi corrupti saepe. Itaque velit ex aperiam, dicta sit. Tempora inventore ea nam in cumque necessitatibus eveniet, consequatur quas cupiditate, ducimus quos veniam facilis neque, repellendus iusto officia accusantium fugiat voluptatum commodi. Architecto sunt, repellendus voluptate praesentium laborum sapiente adipisci totam dolore excepturi quos saepe, ab neque, repudiandae, voluptas eaque. Accusantium consequatur illo dolor labore rem alias consequuntur deleniti, nam voluptatem delectus dolorem soluta animi autem. Consequatur, incidunt nesciunt nam in quam eaque beatae cupiditate molestiae, eum odio ab dolorem quas enim, ipsa numquam unde quasi? Dolorum, aspernatur, voluptates. Hic odio blanditiis aliquid laudantium est, beatae doloremque sunt odit suscipit ipsum labore! Deserunt perspiciatis tempora quos expedita magnam voluptate aut incidunt ab vel sequi exercitationem sit nihil, laborum alias eaque officia dignissimos deleniti vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti eos, minus mollitia obcaecati tempora libero aspernatur explicabo ipsam, tenetur nam voluptate nihil quaerat quibusdam perspiciatis autem ducimus consectetur, repellat alias nemo delectus. Ut, nemo accusamus cupiditate fuga voluptate obcaecati nulla, eius quasi provident eveniet autem ullam doloremque...

CSS

#overlay{
	background: rgba(72,61,76,0.6);
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1;
}
.modal{
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    left: 0;
    height: 100%;
    z-index: 100;
    top: 0;
}
.modal-box{
  background: #fff;
  position: absolute;
  width: 70%;
  margin-top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.noscroll{overflow:hidden;}

JavaScript

$(document).ready(function(){
	if ( $('#overlay').is(':visible') ) {
		$('body').addClass('noscroll');
	}
  else{
  	$('body').removeClass();
  }
})