JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/>
<center>
<div id="wrapper">
    <div id="red"></div>
    <!--Dont change the below overlay div-->
    <div id="overlay">
        <div></div>
    </div>
</div>
</center>

CSS

*{
    margin:0px;
    padding:0px;
}
#wrapper{
    position:relative;
}
#wrapper,#red,#overlay{
    width:200px;
    height:200px;
}
#red{
    background-color:red;
}
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    font-size:0px;
    opacity:0.5;
    box-shadow: 0px 0px 10px 10px red;
}
#overlay div{
    display:inline-block;
    background-color:white;
    opacity:1;
    width:100%;
    height:100%;
}