JSFiddle - React, Tailwind, and code Playground

HTML

<div ><div class="red-layer"><div class="black-block-red"></div></div></div>
<div class="battery second"><div class="yellow-layer"><div class="black-block-yellow"></div></div></div>
<div class="battery third"><div class="green-layer"><div class="black-block-green"></div></div></div>
<div class="battery four"><div class="purple-layer"><div class= "black-block-purple"></div></div></div>

CSS

div {
    display: block;
    border: 4px solid #FF00FF;
    width: 150px;
    height: 50px;
    margin: 10px;
}

.red-layer {
    background: #0000FF;
    width: 37%;
    margin: 0px;
    border: none;
}

.green-layer {
    background: #FF1493;
    width: 30px;
    margin: 0px;
    border: none;
}

.yellow-layer {
    background: #C0FF3E;
    width: 75px;
    margin: 0px;
    border: none;
}

.purple-layer {
    background: #FF00FF;
    width: 60px;
    margin: 0px;
    border: none;
}

.black-block-red {
    border: none;
    margin: 0px;
    width: 7px;
    height: 20px;
    background: #FF00FF;
    position: absolute;
    left: 175px;
    top: 25px;
}

.black-block-yellow {
    border: none;
    margin: 0px;
    width: 7px;
    height: 20px;
    background: #FF00FF;
    position: absolute;
    left: 175px;
    top: 95px;
}

.black-block-green {
    border: none;
    margin: 0px;
    width: 7px;
    height: 20px;
    background: #FF00FF;
    position: absolute;
    left: 175px;
    top: 160px;
}

.black-block-purple {
    border: none;
    margin: 0px;
    width: 7px;
    height: 20px;
    background: #FF00FF;
    position: absolute;
    left: 175px;
    top: 225px;
}