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 {
    display:table;
    width:100%;
    background-color: red;
    padding: 10px;
}

#one, #two, #three {
    text-align: center;
    display:table-cell
}

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