JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel">
  <div id="modal">
    1</br>
    2</br>
    3</br>
    4</br>
    5</br>
    6</br>
    7</br>
    8</br>
    9</br>
    10</br>
    11</br>
    12</br>
    13</br>
    14</br>
    15</br>
    16</br>
    17</br>
    18</br>
    19</br>
    20</br>
    21</br>
    22</br>
    23</br>
    24</br>
    25</br>
    26</br>
    27</br>
    28</br>
    29</br>
    30</br>
  </div>
</div>

Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>

CSS

body {
  
  margin: 0;
  
}

#panel {
  
  background: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  
}

#modal {
  max-height: 100%;
}