JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="box">
            <div id="wrapper">
                <div id="box_content">
                    Content here
                </div>
                <div id="mask"></div>
            </div>
        </div>
    </body>
</html>

CSS

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}