JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="header"></div>
<div class="right"></div>
<div class="left"></div>
</div>

CSS

.header {
background-image: linear-gradient(bottom, rgb(155,78,50) 14%, rgb(186,110,80) 57%, rgb(224,143,112) 79%);
background-image: -o-linear-gradient(bottom, rgb(155,78,50) 14%, rgb(186,110,80) 57%, rgb(224,143,112) 79%);
background-image: -moz-linear-gradient(bottom, rgb(155,78,50) 14%, rgb(186,110,80) 57%, rgb(224,143,112) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(155,78,50) 14%, rgb(186,110,80) 57%, rgb(224,143,112) 79%);
background-image: -ms-linear-gradient(bottom, rgb(155,78,50) 14%, rgb(186,110,80) 57%, rgb(224,143,112) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.14, rgb(155,78,50)),
color-stop(0.57, rgb(186,110,80)),
color-stop(0.79, rgb(224,143,112))
);
width: 300px;
height: 50px;
z-index: 1;
}


.container {
width:300px;
height:300px;
background:url('http://media.techworld.com/cmsdata/news/3213248/chucknorris.jpg') no-repeat;
background-size : 100%;
}

.right {
background:#9B4E32;
width:130px;
height:20px;
float:left;
position:relative;
box-shadow:1px 3px 2px 0px;
}

.right:after {
content:"";
width: 0;
height: 0;
border-top: 19px solid #9B4E32;
border-right: 19px solid transparent;
position:absolute;
right:-19px;
}

.right:before {
content:"";
width: 0;
height: 0;
border-top: 19px solid #333;
border-right: 19px solid transparent;
position:absolute;
right:-19px;
top:4px;
opacity:0.40;
}

.left {
background:#9B4E32;
width:140px;
height:20px;
float:right;
position:relative;
box-shadow:-1px 3px 2px 0px;
}

.left:after {
content:"";
width: 0;
height: 0;
border-top: 19px solid #9B4E32;
border-left: 19px solid transparent;
position:absolute;
left:-19px;
}

.left:before {
content:"";
width: 0;
height: 0;
border-top: 19px solid #333;
border-left: 19px solid transparent;
position:absolute;
left:-19px;
top:4px;
opacity:0.40;
z-index:-1
}

JavaScript

$('div').hide();