JSFiddle - React, Tailwind, and code Playground

by Benjamin

HTML

<div id = "parent">
    <div id = "redDiv"></div>
    <div class = "clearfix"></div>
    <div id = "blueDiv"></div>
</div>

CSS

.clearfix {
    clear: both;
}

#parent {
    border: 2px solid green;
    background: #F0F0F0; 
    height: auto; 
    width: 520px;
    position: relative;
}

#redDiv {
    background-color: red;
    width: 100%;
    height: 50px;
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    z-index:2;
    opacity:0.7;
}