JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div class="box">
    <div class="item">
        <div class="box2">
            
        </div>
    </div>
    
</div>

CSS

.box {width: 100%;}
.item {
    width:40%;;
    height:0;
    padding-bottom: 80%;
    background-color:#f00;
    float:left;
    margin:10px 5px;
    position: relative;
}
.box2 {
    position: absolute;
    left:0;
    bottom: 20px;
    width:20%;;
    height:0;
    padding-bottom: 40%;
    background-color:blue;
}