JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div class="yes"></div>
<div class="no"></div>

CSS

.yes {
    width: 100px; height: 100px; background: red; margin-bottom: 20px;
    /* You may assign position but no z-index at all */
    position: relative; 
}
.yes:after {
    content: " "; background: green;
    position: absolute; left: -10px; top: 10px;
    width: 20px; height: 20px;
    /* has to be negative to appear below its non-z-indexed parent */
    z-index: -10;
}

.no {width: 100px; height: 100px; background: red; position: relative; z-index: 40;}
.no:after {content: " "; background: green; position: absolute; right: -10px; top: 10px; z-index: 0; width: 20px; height: 20px;}