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 {
overflow: hidden;
background-color: red;
padding: 10px;
}

#one, #two, #three {
 margin: 0 auto;
 text-align: center;
 clear:both;
}

#one {
background-color: blue;
}

#two {
background-color: green;
}

#three {
background-color: pink;
}