JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container CF">Container
        <div id="featureBar">
            <div class="feature">Feature 1</div>
            <div class="feature">Feature 2</div>
            <div class="feature last">Feature 3</div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

CSS

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}

.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}

/**
* ========== HOME PAGE ==========
*/

#featureBar {
    margin-top: 50px;
}

.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}

.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

/**
* ========== FOOTER ==========
*/

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}
.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}