JSFiddle - React, Tailwind, and code Playground
HTML
<div class="root">
<div class="scroll-container">
<div class="flex-container">
<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Nam sodales quam nunc.</p>
<p>Donec condimentum elit in quam ultricies aliquet nec sed sapien.</p>
<p>Mauris non erat sit amet ex blandit dignissim.</p>
<p>Suspendisse vitae orci eu mauris fringilla posuere.</p>
<p>Pellentesque feugiat pretium efficitur.</p>
</div>
</div>
</div>
CSS
.root {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
.scroll-container {
margin: auto;
max-height: 100%;
overflow: auto;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
background: white;
height: 400px;
width: 600px;
}