JSFiddle - React, Tailwind, and code Playground

HTML

<div id="base">
<div id="box">
</div>
</div>

CSS

#base {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    box-shadow: 0 5px 30px 0 rgba(50, 50, 50, 0.75);
}
#box {
    width: 100px;
    height: 100px;
    bottom: 0px;
    position: absolute;
    left: 50px;
    box-shadow: 0 5px 20px 0 rgba(50, 50, 50, 0.75) inset;
}
#box:after {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: -40px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255,0), rgba(250, 250, 250, 0.75) 10%,rgba(250, 250, 250,0.75) 90%, rgba(255, 255, 255,0));
}