JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <h2>A title here</h2>
    <p>
        <!-- start slipsum code -->

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
    </p>
</div>

CSS

#box {
    width:300px;
    height:300px;
    background:#ccc;
    padding:10px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -150px;
}