JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="one"><p>Center me</p></div>
    <div id="two"><p>Center me as well</p></div>
    <div id="three"><p>Center me as well please</p></div>
</div>

CSS

#main {
    width:100%;
    background-color: red;
    padding: 10px;
    text-align:center;
}

#one, #two, #three {
    text-align: center;
    display:inline-block;
    *display:inline;
    *zoom:1;
}

#one { background-color: blue; }
#two { background-color: green; }
#three { background-color: pink; }