JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-container" class="container">
        <div id="box1">
        <h1>Box 1</h1>
        </div>
        <div id="box2">
          <h1>Box 2</h1>
        </div>
        <div id="box3">
          <h1>Box 3</h1>
        </div>
      </div>

CSS

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  margin:0 50px 0 50px;
}

 #box1 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: orange;
}

 #box2 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: blue;
}

 #box3 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: yellow;
}