JSFiddle - React, Tailwind, and code Playground

by Kamal Rawat

HTML

<div class="modalClass" >
  
  <div id="id01" class="w3-modal childDiv">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'" 
      class="w3-button w3-display-topright">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
      
    </div>
  </div>
</div>

  <input type="button" value="save"/>
  <input type="button" value="cancel"/>
  
</div>

CSS

.modalClass {
  border: 1px solid red;
  position: fixed;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%,-50%);
  outline: 0;
}

.childDiv {
  max-height: 90vh;
  max-width: 90vw;
  overflow:auto;
}