JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bottom-content">
<div id="bottom-left-column">
    <p>Hello left, can you be centered please?</p>
    <img src="https://www.google.pt/images/srpr/logo3w.png" alt="nice" />
    <div>what about me, I'm nested but I don't get centered? yes I do. Because, I'm inside a div BUT I'm text. :)</div>
    </div>
    <div id="bottom-middle-column">
    <p>I also wish to be centered</p>
    </div>
    <div id="bottom-right-column">
        <p>oh yeah? Then me too!! me too!!</p>
    </div>
</div>

CSS

#bottom-content {
  background-color:red;
  clear:both;
  overflow:hidden;
}

#bottom-left-column, 
#bottom-middle-column, 
#bottom-right-column {
    float:left;
    width:33%;
    border: 1px solid blue;
    text-align:center;
}