JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section-1">
    <div class="flex-container">
        <div class="row">
             <h1>Title words.</h1>

             <h2>Subtitle words here. Lots of them. Like a paragraph's worth.</h2>

        </div>
    </div>
</section>

CSS

.section-1 {
    background: url("http://img01.deviantart.net/cb2e/i/2011/323/0/3/background_05_1600x1200_by_frostbo-d42mpk5.png") no-repeat;
    background-attachment: scroll;
    background-size: contain;
    position: relative;
    height: 675px;
    color: #fff;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid red;

}