JSFiddle - React, Tailwind, and code Playground

by Alex___Yang

HTML

<html>
    <body>
        <div class='parent'>
            <div class="head"></div>
            <div class="col-1"></div>
            <div class="col-2"></div>
            <div class="col-3"></div>
        </div>
    </body>
</html>

CSS

.parent {
    width: 200px;
    height: 200px;
    position:relative;
}
.parent .head {
    width: 200px;
    height:50px;
    background-color:red;
}
.parent .col-1 {
    width: 60px;
    height:140px;
    top:70px;
    position:absolute;
    background-color:gray;
}

.parent .col-2 {
    width: 60px;
    height:140px;
    top:70px;
    left:70px;
    position:absolute;
    background-color:blue;
}

.parent .col-3 {
    width: 60px;
    height:140px;
    top:70px;
    right:0px;
    position:absolute;
    background-color:green;
}