JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal" class="modal">
  <div class="dialog">
    <button class="close" onclick="closeM()">
      X
      </button>
    <h1>
      Hello World!
    </h1>

    <p>
      ras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
      lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras
      mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
      lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras
      mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
      lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras
      mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
      lacus vel augue laoreet...

CSS

.modal {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 1s;
}

.modal .dialog {
  width: 50%;
  max-width: 300px;
  border-radius: 5px;
  margin: 5% auto 5% auto;
  padding: 1em 2em;
  background-color: white;
}

JavaScript

function openM() {
  var modal = document.getElementById("modal")
  modal.style.width = '100%'
  modal.style.height = '100%'
  modal.style.overflowY = 'auto'
  modal.style.opacity = '1.0'
  document.getElementsByTagName("body")[0].style.overflow = "hidden"
}

function closeM() {
  modal.style.width = '0'
  modal.style.height = '0'
  modal.style.overflowY = 'hidden'
  modal.style.opacity = '0'
  document.getElementsByTagName("body")[0].style.overflow = "initial"
}