JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
  <h1>This is another</h1>
  <section>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
  </section>
</div>

CSS

.outside {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: red;
  flex-direction: column;        /* new */
  
}

section {
  display: flex;
}

.inside {
  width: 30%;
  margin-left: 1.5%;             /* not recommended; don't use percentage on flex items */
  margin-right: 1.5%;            /* http://stackoverflow.com/a/36783414/3597276 */
  background-color: yellow;
}