JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="outer">
        <div id="inner" src=""></div>
	</div>
    <div class="overlay">
    </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;
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255, 255, 255, 0.5);
}