JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base"> </div>
<div class="darker"> </div>
<div class="lighter"> </div>

CSS

.base {
    
}
.darker {
    box-shadow: inset 100px 10px rgba(0,0,0,1);
    
}
.lighter {
    box-shadow: inset 100px 100px rgba(255,255,255,0.1);
}
div {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}