JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<p>Тактико-технические характеристики вооружения ЫЩ-35У (образца 2035 года)</p>
<div class="back-1">Уровень зарядки
    <div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="back-2">Убойная сила
    <div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="back-3">Перезарядка
    <div></div><div></div><div></div><div></div><div></div><div></div>
</div>

CSS

p {font: 16px/16px Times;}

div.back-1, div.back-2, div.back-3 {
    width: 370px;
    height: 30px;
    background:linear-gradient(120deg, #fff 4%, #888F99 4%, #888F99 96%, #fff 96%);
    margin: 0 0 10px 7px;
    color: #fff;
    padding: 10px 0 0 25px;
}

.back-1 div, .back-2 div, .back-3 div {
    width: 35px;
    height: 16px;
    float: right;
    margin: 2px 15px 0 -15px;
    background:linear-gradient(120deg, #888F99 27%, #D3D5D4 27%, #D3D5D4 73%, #888F99 73%);
}

div:nth-of-type(6), 
.back-1 div:nth-of-type(5), 
.back-2 div:nth-of-type(5) {
   background:linear-gradient(120deg, #888F99 27%, #01DFA5 27%, #01DFA5 73%, #888F99 73%);
}

.back-1 div:nth-of-type(4),
.back-1 div:nth-of-type(3),
.back-2 div:nth-of-type(4) {
     background:linear-gradient(120deg, #888F99 27%, #F7D358 27%, #F7D358 73%, #888F99 73%);
}
.back-1 div:nth-of-type(2),
.back-1 div:nth-of-type(1) {
     background:linear-gradient(120deg, #888F99 27%, #DF7401 27%, #DF7401 73%, #888F99 73%);
}