JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class="section" id="welcome">
    <h1>Meet Joe</h1>
</div>

<div class="section" id="interesting">
    <h1>He's interesting</h1>
</div>

<div class="section" id="coffee">
    <h1>Coffee is his favorite beverage</h1>
</div>
</div>

CSS

body,html{height: 100%; margin: 0; padding: 0; width: 100%; }
div{box-sizing: border-box; }
.section{margin: 0; min-height: 100%; padding: 0; text-align: center; top: 0; width: 100%; }
.section h1{color: white; font-family: 'Proxima Nova'; font-weight: 600; left: 50%; margin: 0 auto; position: absolute; top: 50%; webkit-transform: translate(-50%,-50%); }
#container {position: relative; }
#welcome{background-color: #ff5258; }
#welcome h1{top: 50px; }
#interesting{background-color: #64dadd; }
#interesting h1{top: 100px; }
#coffee{background-color: #8b5033; }
#coffee h1{top: 160px; }