JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-wrapper1">
    <h1> Should come in center </h1>
</div>

<div id="header-wrapper2">
    <h1> Won't come in center </h1>
</div>

CSS

#header-wrapper1 {
    width: 400px;
    background-color: #def;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

#header-wrapper2 {
    width: 400px;
    background-color: #fed;
    height: 200px;
    line-height: 200px;     
    // text-align: center;
}
#header-wrapper2 h1 {
margin: auto;   
}