JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="intro-area">
    <div class="intro-text">
        <p>This is a paragraph I want to center on the page.</p>
        <p>This is another paragraph I want to center on the                 page.</p>
    
    </div>
</div>
</body>

CSS

html, body, .intro-area {
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

.intro-area {
    background-color: #e7e7e7;
    display: table;
    text-align: center;
}

.intro-text {
    display: table-cell;
    vertical-align: middle;
}

JavaScript

$(document).ready(function($){

    //Get Header height from browser height

    var viewportHeight = $(window).height();
    $('.intro-area').height(viewportHeight);
      

});