JSFiddle - React, Tailwind, and code Playground

by Rich Somerfield

HTML

<div>
  <div class="batteryContainer">
    <div class="batteryOuter"><div id="batteryLevel"></div></div>
    <div class="batteryBump"></div>
  </div>
</div>

CSS

.batteryContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.batteryOuter {
  border-radius: 3px;
  border: 1px solid #444;
  padding: 1px;
  width: 25px;
  height: 9px;
}

.batteryBump {
  border-radius: 2px;
  background-color: #444;
  margin: 2px;
  width: 1px;
  height: 3px;
}

#batteryLevel {
  border-radius: 2px;
  background-color: #73AD21;
  width: 18px;
  height: 9px;
}