JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="outer">
        <div id="inner" src=""></div>
	</div>
</div>

CSS

#wrapper{
	position:relative;
    top:0;
	background:rgba(0,0,0,0.6);
	width:400px;
	height:200px;
    z-index:99;
}
#outer{
	position:relative;
	width:400px;
	height:200px;
	background: rgba(50,0,0,1);
}
#inner{
	position:relative;
	width:350px;
	height:200px;
    background:rgba(0,50,0,1);
	margin: 0 auto;
}

#wrapper:after {
    position:relative;
    top:-200px;
    left:0px;
    content:"";
    width:400px;
    height:200px;
    display:block;
    background:rgba(255, 0, 0,0.5)
}