JSFiddle - React, Tailwind, and code Playground

by Alexander Zonov

HTML

<!-- PARTIAL INSET SHADOW -->

<div class="super_big square inset_shadow">
<div class="small square overflow_hide transparent">
<div class="big square inset_shadow transparent">
</div>
<div>
<div>

CSS

.square {
    position: relative;
}

.super_big {
    top: 100px;
    width: 300px; height: 300px;
}

.big {
    top: -10px;
    width: 200px; height: 200px;
}

.small {
    width: 100px; height: 100px;
}

.green {
    background-color: green;
    z-index: 100;
}

.yellow {
    background-color: yellow;
    z-index: 100;
}

.red {
    background-color: red;
    z-index: 50;
}

.transparent {
    background-color: transparent;
}

.inset_shadow {
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,1) inset;
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,1) inset;
    box-shadow: 0px 0px 10px rgba(0,0,0,1) inset;
}

.overflow_hide {
    overflow: hidden;
}

.opacity_10 {
    opacity: 0.1;
}
}