JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContent" class="mainContent">
  <div id="mainContentText" class="mainContentText">
    <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
  </div>
  <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
  </div>
</div>

CSS

.mainContent {
    background-color: rgb(220, 220, 220);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 20%;
    margin: 0 auto;
    text-align: center;
    }