JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="black"></div>

CSS

.red,.green,.blue,.black{ height:50px; width:100%; margin:10px 0;}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}
.black{background:black;}
.overlay{width:50%; height:500px; position:absolute; top:0; left:0; background:rgba(255,255,255,.3);}