JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div> 
    
    
    
    
    
</div>

CSS

.container {
    width:400px;
    height:300px;
    background-color:blue;
    position:relative;
    background-image: url(http://imageshack.com/a/img823/8438/s3oa.png);
    background-size:contain:
}
.top {
    width:400px;
    height:51px;
    position:absolute;
    background-color:red;
    opacity:0.5;
    top:0;
    
    
}
.bottom {
    width:400px;
    height:51px;
    position:absolute;
    background-color:red;
    opacity:0.5;
    bottom:0;
    
}
.left {
    width:75px;
    height:198px;
    position:absolute;
    background-color:red;
    opacity:0.5;
    top:51px;
    left:0;    
}
.left:after {
    content: " ";
    width:76px;
    height:198px;
    position:absolute;
    background-image: url(http://imageshack.com/a/img855/6228/nq9p.png);
    background-repeat:no-repeat;
    top:0;
    right:-76px; 
}

.right {
    width:75px;
    height:198px;
    position:absolute;
    background-color:red;
    opacity:0.5;
    top:51px;
    right:0; 
}
.right:before {
    content: " ";
    width:76px;
    height:198px;
    position:absolute;
    background-image: url(http://imageshack.com/a/img33/7937/s8er.png);
    background-repeat:no-repeat;
    top:0;
    left:-76px; 
}