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;
	max-height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
	overflow: auto;
  max-height: 90%;
}

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