JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pole"></div>
<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>

CSS

.pole {
    background-color:#666666;
    background-image:linear-gradient(to right, #666666, #ffffff, #666666);
    width:5px;
    height:150px;
    float:left;
}
.black {
    height:25px;
    width:125px;
    background-color:#000000;
    background-image:linear-gradient(to right, #333333, #000000, #333333, #000000);
}
.red {
    height:25px;
    width:125px;
    background-color:#ff0000;
    background-image:linear-gradient(to right, #ff3333, #ff0000, #ff3333, #ff0000);
}
.yellow {
    height:25px;
    width:125px;
    background-color:#ffff00;
    background-image:linear-gradient(to right, #ffff33, #ffff00, #ffff33, #ffff00);
}