JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shadow">
    <div id="itemSoldOutView">
        <div id="itemSoldOutViewTitle">
            <div id="itemSoldOutViewCancel"></div>
            <h3>This is the title text:</h3>
        </div>
        <div id="itemSoldOutViewContent">
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            blabla
        </div>
    </div>
</div>

CSS

#shadow { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background: darkgray;
    z-index:2;
}

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    overflow: hidden;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
    overflow-y: scroll;
    z-index: 10;
    max-height: 90%;
}

#itemSoldOutViewCancel {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: red;
}