JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container ">
         <div class="content facet" >
             Content 1
         </div>
    </div>
    <div class="container">
         <div class="content green" >
             Content 2
         </div>
    </div>    
    <div class="container">
         <div class="content" >
             Content 3
         </div>
    </div>    
    <div>
        <h1>more</h1>
        <pre>afdsfa
            asdfas
            f
            asdf
            sadf
            asdf
            as
            df
            asdf
            a
            sf
            a
            dfa
            sdf
            a
            fa
            sf
            dsf
            af
            sdf
            dsf
            dd
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            d
            
        </pre>
    </div>
</body>

CSS

html, 
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
    display:table;
    width:100%;
}

.facet {
    background:url('http://longflat.s3-website-ap-southeast-2.amazonaws.com/img/h1bg.jpg') repeat-y;
    background-size:100%;
}

.content {
    background-color: blue;
}
.green{
    background-color: green;
}


.content{
    display:table-row;
}