JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
    <div class="wrap">
        <header><h2>My Modal</h2></header>
        <div class="body">
          <div class="content">
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
            <p>Modal content</p>
          </div>
        </div>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum molestie quam, sit amet aliquet nunc eleifend id. Duis massa urna, egestas eget vulputate sit amet, auctor et felis. Morbi facilisis interdum lobortis. Vivamus malesuada ultricies purus, a vestibulum orci placerat ac. Duis aliquam, odio eu sagittis vestibulum, sapien tortor aliquam augue, quis viverra dolor diam vel risus. Ut blandit cursus risus, id tincidunt dui facilisis eget. Nam iaculis lacus eget metus mollis adipiscing. Nam non risus quis arcu molestie placerat nec sed orci. Maecenas rutrum laoreet lacus quis ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus in augue massa. Etiam sit amet tellus quis est condimentum cursus. Proin non neque nec enim luctus interdum. Nam vitae luctus neque. Duis dignissim, elit nec placerat bibendum, lorem mi imperdiet leo, et imperdiet lectus dui eget nulla.</p>

<p>Ut malesuada condimentum purus in euismod. Aliquam vitae felis in nunc lacinia tempus vitae id tellus. Ut dignissim, libero sit amet blandit molestie, libero mauris sollicitudin lectus, in accumsan quam nunc cursus tortor. Suspendisse eros nibh, viverra id elementum vel, rhoncus eu risus. Nullam et mi ante. Vivamus commodo, nisl id imperdiet posuere, libero felis porta nunc, ac luctus purus est et nunc. Vivamus quis nisl purus. Mauris aliquet...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.modal {
   position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.wrap {
    position: relative;
    margin: 0 auto;
    display: block;
    width: 90%;
    /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ 
    max-width: 500px;
    height: 90%;
    padding: 30px;
}
.modal header {
    height: 30px;
    padding: 0;
    color: #FFF;
    background-color: #007;
} 
.modal header h2 {
    padding: 5px 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
}
.modal .body {
    background-color: #FFF;
    max-height: 100%;
    overflow-y: auto;
}
.modal .body .content {
    padding: 10px;
}
p + p {
    margin-top: 1em;
}