JSFiddle - React, Tailwind, and code Playground

by Morten Pradsgaard

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;}