JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain-info"><!-- contain -->
 <div class="info1">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div>  

 <div class="info2">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 

 <div class="info3">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 
 </div><!-- contain -->

CSS

.contain-info {
 position: relative;
 text-align: center;
 margin: auto;
 }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 margin: auto;
 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }