JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
<p id="TEXT">This text is not centered</p>
     </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;
}

#TEXT {
top: 30px;
left: 50%
}