JSFiddle - React, Tailwind, and code Playground

HTML

<div class=x><ul><li class=a></li><li class=b></li><li class=c></li><li class=d></li></ul></div>

CSS

.x {width:120px; height:30px; border:1px solid #f00;} 
.x, .x div, .x ul, .x li, .x a {margin:0; padding:0; display: block;}
.x li, .x a {width:30px;}
.x {position: relative;}
.x .a, .x .b, .x .c, .x .d  {position:absolute; background:#f00; opacity:0.3;width:20px;height:30px;}
.x .a {left:5px;}
.x .b {left:35px;} 
.x .c {left:65px;} 
.x .d {left:95px;}