JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="heading">
        <div class="text_contain_head">
             <h1>Heading</h1>
            <p>Subheading</p>
        </div> 
 <span class='arrow-down'></span>
 <span class='arrow-right'></span>

    </li>
    <li class="options">
        <div class="text_contain">
             <h2>Option 1</h2>
            <p>Description</p>
        </div>
    </li>
    <li class="options">
        <div class="text_contain">
             <h2>Option 2</h2>
            <p>Description</p>
        </div>
    </li>
    <li class="options">
        <div class="text_contain">
             <h2>Option 3</h2>
            <p>Description</p>
        </div>
    </li>
    <li class="options">
        <div class="text_contain">
             <h2>Option 4</h2>
            <p>Description</p>
        </div>
    </li>
    <li style='clear: both'><!-- quick clearfix --></li>
</ul>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    color: #fff;
}
ul {
    width: 900px;
    background: url(http://www.placekitten.com/900/600) no-repeat 0 0;
    margin: 0 auto;
}
.options {
    position: relative;
    padding-bottom: 25%;
    height:150px;
    width: 300px;
    background-color: rgba(0, 0, 0, 0.25);
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}
.heading {
    position: relative;
    padding-bottom: 25%;
    width: 600px;
    height: 150px;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    background-color: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    float:left;
}
/* arrow down */
.arrow-down {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(45deg);
    top: 200px;
    left: 300px;
    background-color: rgba(0, 0, 0, .5);
    margin-left: -25px;
    z-index: 5;
    border: 1px solid #fff;
    border-left: none;
    border-top: none;
}
.arrow-down:after {
    content:' ';
    display: block;
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(-45deg);
    background-repeat: no-repeat;
    background-image: url(http://www.placekitten.com/900/600);
    background-position: -114px -77px;
    z-index: 1;
    position: absolute;
    top: -100px;
    left: -150px;
}
.arrow-down:before {
    content:'';
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
}
/* arrow-right = same as arrow down, with some different positioning */
.arrow-right {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(45deg);
    top: 100px;
    left: 600px;
    background-color: rgba(0, 0,...