JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
         <div class="title"> MyTitle </div>
         <div class="content">
            <ul>
                 <li>Content</li>
                <li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li><li>Content</li>
             </ul>
             <div class="button">Btn1 - Btn2</div>
    </div>

CSS

.modal {
    background-clip: padding-box;
    background-color: #eee;
    border-radius: 2px;
    left: 0;
    margin: auto;
    max-height: 70%;
    max-width: 55%;
    overflow-y: auto;
    padding: 24px;
    position: fixed;
    right: 0;
    transform: translate(0px);
    z-index: 1000;

    .content{
         max-height: 60%;
         overflow: auto;
    }