JSFiddle - React, Tailwind, and code Playground

by gagob11

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="b low"></div>
  <div class="b medium"></div>
  <div class="b high"></div>
</body>
</html>

CSS

.b {
    width: 150px; /* Ширина */
    height: 50px; /* Высота */
    border: 4px solid #000; /* Параметры рамки */
    margin-bottom: 10px; /* Отступ снизу */
    position: relative; /* Относительное позиционирование */
   }
   .b::before, .b::after {
    content: '';
    position: absolute;
   }
   .b::after { /* Добавляем контакт справа */
    width: 10px;
    height: 20px;
    background: #000;
    right: -10px; top: 15px;
   }
   .b::before { height: 50%; }
   .low::before { /* Красная батарейка */
    width: 33%;
    background: #ED1C24;
   }
   .medium::before { /* Жёлтая батарейка */
    width: 50%;
    background: #FFC60B;
   }
   .high::before { /* Зелёная батарейка */
    width: 100%;
    background: #00A055;
   }