JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<div class="spacer"></div>

<div class="outer">
    <div class="child"></div>
    
    <div class="outer">
        <div class="child"></div>
    </div>
</div>

CSS

.spacer {
    display: block;
    height: 200px;
    border: solid 1px #aaaaff;
}

.outer {
    position : relative;
    width:  300px;
    background-color: #efefef;
    height:  200px;
    padding: 30px;
    border: solid 1px #ee00ff;
}

.innerouter {
   margin: 100px;
   width: 100px;
    height: 50px;
    padding-top:100px;
   border: solid 1px #aaffff 
}

.child {
   position: absolute;
    top:0px;
    left:-20px;
    background-color: #aaaaaa;
    opacity: 0.3;
    width:100px;
    height: 50px
    
}