JSFiddle - React, Tailwind, and code Playground

HTML

<header class="bg__header">
    <nav></nav>
</header>
<main>
    <article>
        <div class="grid">
            <div class="col-1-1">
                 <h1>TITLE</h1>

                <p>consectetur voluptatibus elit eiusmod do arbitror litteris dolore appellat fabulas quorum elit vidisse singulis summis firmissimum te eruditionem culpa comprehenderit eram ita transferrem hic instituendarum ut magna nostrud voluptate despicationes familiaritatem arbitrantur graviterque exquisitaque familiaritatem coniunctione enim varias despicationes probant</p>
            </div>
        </div>
    </article>
    <section class="para"></section>
    <article>
        <div class="grid">
            <div class="col-1-1">
                 <h1>TITLE</h1>

                <p>consectetur voluptatibus elit eiusmod do arbitror litteris dolore appellat fabulas quorum elit vidisse singulis summis firmissimum te eruditionem culpa comprehenderit eram ita transferrem hic instituendarum ut magna nostrud voluptate despicationes familiaritatem arbitrantur graviterque exquisitaque familiaritatem coniunctione enim varias despicationes probant</p>
            </div>
        </div>
    </article>
</main>
<footer></footer>

CSS

html, body {
    width:100%;
    height:auto;
    font-family:'open-sans', sans-serif;
}
header {
    width:100%;
}
nav {
}
main {
    width:100%;
    min-height:50vh;
    position:relative;
}
main:after {
    /*ARROW on header tag*/
    top:0;
    left:50%;
    border:solid transparent;
    content:"";
    height:0;
    width:0;
    position:absolute;
    border-color: rgba(136, 183, 213, 0);
    border-top-color:#2a2a2a;
    border-width: 60px;
    margin-left: -60px;
}
article {
    width:100%;
    min-height:30vh;
    padding:10% 0 5% 0;
}
[class*="bg__"] {
    background:#f1f1f1 no-repeat fixed center;
    background-size:cover;
}
.bg__header {
    background-image: url(http://mopra.dk/projects/NS/assets/img/bg1.png);
    height:90vh;
}
.bg__article1 {
    background-image: url(img/bg2.png);
    height:60vh;
}
.bg__article2 {
    background-image: url(img/bg3.png);
    height:60vh;
}
.bg__footer {
    background-image: url(img/bg4.png);
    height:30vh;
}
footer {
    width:100%;
    min-height:20vh;
    background-color:#2a2a2a;
}
main:after {
    border-color: white;
    border-top-color: transparent;
    top: -60px;
}
.bg__header {
    position: relative;
}
.bg__header:before {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: -60px;
}
.bg__header:after {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: -60px;
}