JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    
  </head>
  <body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris est nulla, porta et pellentesque non, dictum nec purus. Sed arcu risus, suscipit vel vehicula ac, accumsan ac nibh. Fusce eu quam eros. Maecenas at condimentum justo. Phasellus a tempus elit. Sed placerat sagittis suscipit. Phasellus pellentesque eros malesuada massa pharetra volutpat nec nec nulla. Donec arcu orci, dignissim id consectetur non, iaculis eu ligula.
</p>
<p>
  <button id="modalOpenBtn">MODAL</button>
</p>
<p>
Nullam consequat imperdiet sapien, at fringilla ante mollis vitae. Aliquam quis lorem eget dolor venenatis dignissim. Vestibulum sit amet quam ac eros congue tempor sit amet ac enim. Maecenas venenatis ultrices massa a aliquet. Nulla quis volutpat velit. Aenean egestas nisl quis dolor condimentum, a eleifend erat pulvinar. Donec vitae gravida felis. Proin at mollis elit, vitae accumsan libero. Aenean velit ex, laoreet ut augue non, elementum egestas diam. Nam eget sem sed turpis pharetra facilisis. Morbi placerat erat libero, ut maximus eros scelerisque ut. Vestibulum sodales dui tellus, vel faucibus massa volutpat pellentesque. Nunc feugiat diam nec purus tempus malesuada. Etiam vel risus eget leo feugiat fringilla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<div class="modalContainer">
<div class="modal">
  <p>
    <button id="modalCloseBtn">CLOSE</button>
  </p>
  <p>
    Etiam ut tellus sed quam consequat aliquam. Mauris fringilla risus eget efficitur pellentesque. Vestibulum efficitur aliquet turpis sed vulputate. Aliquam at vulputate diam, non pretium sem. Morbi elit magna, sollicitudin sed volutpat nec, gravida non neque. Morbi consectetur maximus ex nec convallis. Vivamus enim ipsum, sagittis sit amet commodo id, facilisis eu quam.
  </p>
</div></div>

</body>
</html>

CSS

body {
  background: #fff;
  color: #000;
}
.modalOpen {
  /* overflow: hidden; */
}
.modalContainer {
  display: none;
  overflow: auto;
  overscroll-behavior: none;
}
.modalOpen .modalContainer {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
}
.modal {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 250px;
  height: 100px;
  overflow-y: scroll;
  overscroll-behavior: none;
  background: #ccc;
}

JavaScript

const openModal = ()=>{
	document.body.classList.add('modalOpen')
}
const closeModal = ()=>{
	document.body.classList.remove('modalOpen')
}
document.querySelector('#modalOpenBtn').addEventListener('click',openModal);
document.querySelector('#modalCloseBtn').addEventListener('click',closeModal);