JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div style="width:200px; height:100px; float:left; background-color:#F00; opacity:0.7;
    filter:alpha(opacity=70);">   <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
    Red Div
    </div>
    <div style="width:100px; height:100px; float:left; background-color:#F00; clear:left; opacity:0.7;
    filter:alpha(opacity=70);">
    Red Div
    </div>
    <div style="width:100px; height:100px; float:left; background-color:#FF0; opacity:0.5;
    filter:alpha(opacity=50);">
    Overlapping Region
    </div>
    <div style="width:100px; height:100px; float:left; background-color:#030; opacity:0.7;
    filter:alpha(opacity=70);">
    Green Div
    </div>
    <div style="width:100px; height:100px; float:left;  clear:left; opacity:0.7;
    filter:alpha(opacity=70);">
    Blank Div
    </div>
    <div style="width:200px; height:100px; float:left; background-color:#030; opacity:0.7;
    filter:alpha(opacity=70);">
    Green Div
    </div>
    </div>