JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="back">
        
    </div>
    <div class="container">
        
    </div>
</div>

CSS

div.wrapper {
	width:100%;
	height:100%;
	position:fixed;
	margin:auto auto;
	
	z-index:0;
}
div.back {
    width: 100%;
    height: 100%;
    background-color:rgba(34,34,34,0.5);
    
	transition:background-color ease-in-out 0.25s;
    z-index: 1;
}
div.back:hover {
	background-color:rgba(34,34,34,0.25);
	cursor:pointer;
}
    div.wrapper > div.container {
        width:400px;
        height:100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background:#3498DB;
        box-shadow:0 0 15px rgba(0,0,0,0.25);
        z-index: 2;
    }