JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <div class="base">Уровень зарядки
        <div class="in11"></div>
        <div class="in12"></div>
        <div class="in13"></div>
        <div class="in14"></div>
        <div class="in15"></div>
        <div class="in16"></div>
    </div>
</p>
<p>
    <div class="base"><span class="text-normal">Убойная сила</span>
        <div class="in21"></div>
        <div class="in22"></div>
        <div class="in23"></div>
        <div class="in24"></div>
        <div class="in25"></div>
        <div class="in26"></div>
    </div>
</p>
<p>
    <div class="base">Перезарядка
        <div class="in31"></div>
        <div class="in32"></div>
        <div class="in33"></div>
        <div class="in34"></div>
        <div class="in35"></div>
        <div class="in36"></div>
    </div>
</p>
<div class="cutleft"></div>
<div class="cutright"></div>

CSS

.base {
    text-transform:none;
    color:white;
    position:relative;
    height:18px;
    width:380px;
    transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);
    -webkit-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);
    -moz-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);
    -o-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);
    -ms-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);
    background:#878f94;
    padding-left:23px;
    padding-top:12px;
    padding-bottom:12px;
    font-size:15px;
}
.in11 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#51dbb3;
    left:160px;
    top:12px;
}
.in12 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#51dbb3;
    left:200px;
    top:12px;
}
.in13 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#dbd651;
    left:240px;
    top:12px;
}
.in14 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#dbd651;
    left:280px;
    top:12px;
}
.in15 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#db8f51;
    left:320px;
    top:12px;
}
.in16 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#db8f51;
    left:360px;
    top:12px;
}
.in21 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#51dbb3;
    left:160px;
    top:12px;
}
.in22 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#51dbb3;
    left:200px;
    top:12px;
}
.in23 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#dbd651;
    left:240px;
    top:12px;
}
.in24 {
    padding:0px;
    position:absolute;
    height:20px;
    width:25px;
    background:#d3d5d4;
    left:280px;
    top:12px;
}
.in25 {
    padding:0px;
   ...