JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

    <div class="header">
        <div class="container">
            <h1>Header</h1>
        </div>
    </div>
        
    <div class="content">
        <div class="container">
            <div class="column active">
                <h2>Column 1</h2>
            </div>
            <div class="column">
                <h2>Column 2</h2>
            </div>
            <div class="column">
                <h2>Column 3</h2>
            </div>
            <div class="column">
                <h2>Column 4</h2>
            </div>
        </div>
    </div>
    
</div>

CSS

#wrapper {
    width: 100%;
    overflow: hidden;
}

.container {
    width: 600px;
    margin: 0 auto;
    position: relative;
    top:-100px;
}

.header {
    height: 200px;
    padding-bottom: 100px;
    background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg");
}

.column {
    height: 100px;
    float: left;
    width: 25%;
    background: no-repeat 50% 0 url("http://s10.postimage.org/cug730e49/triangle_bg.png");
}

.content {
    border-top: 1px solid blue;
}

.column h2 {
    margin-top: 20px;
}

.arrow {
    margin-top: -2px;
    width: 111px;
    height: 56px;
    background: url("http://s13.postimage.org/dahh471wz/arrow.png") no-repeat 0 0;
}

.arrow2 {
    margin-top: -2px;
    width: 111px;
    height: 56px;
    background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0;
}