JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

SCSS

.health-bar {
  width: 500px; 
  height: 20px; 
  border: 1px solid green;
  border-radius: 30px;
  overflow: hidden;
}

.health-bar__fill {
  background: lighten(green, 5%);
  width: 100%;
  height: 100%;
  transition: background 0.1s ease;
}

.apply-damage {
  margin: 20px;
}