JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
  <div>
    <h1> This is another</h1>
  </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>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>

</div>

CSS

.outside {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.inside {
  background-color: yellow;
  flex:1 1 30%;
  margin:0  1.5% auto;

}

.outside > div:first-of-type {
 flex:1 1  100%;
 margin:auto 0 0;

}