JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div class="outerBox"
<p id="TEXT">This text is not centered</p>
     </div></div>

CSS

#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
.outerBox{
    width:100%;
    text-align:center;
}

#TEXT {
top: 30px;
    line-height:100px;
}