JSFiddle - React, Tailwind, and code Playground

by smithkl42

HTML

<div class="parent">
    <div class="child child1">
        <div class="overlay"></div>
    </div>
    <div class="child child2"></div>
</div>

CSS

.parent {
    background-color: blue;
    height: 200px;
    width: 400px;
    border-width: 2px;
    border-style: solid;
}
.child {
    position:relative;
    width: 200px;
    height: 200px;
    float:left;
}
.child1 {
    background-color: red;
}
.child2 {
    background-color: orange;
}
.overlay {
    position:absolute;
    height:30px;
    background-color:gray;
    width:100%;
    bottom:0px;
    left:0px;
}