JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="health">
  <div data-health="60%"></div>
</div>

CSS

body{
  background-color:#000000;
}
.health{
  pointer-events:none;
  position:fixed;
  top:50px;
  right:50px;
  z-index:999;
  background-color:rgba(255,255,255,0.3);
  width:200px;
  border-radius:30px;
  height:40px;
  -webkit-box-shadow:inset 0 0 20px 3px rgba(255,255,255,0.6);
box-shadow:inset 0 0 20px 3px rgba(255,255,255,0.6);
}
.health:before{
  content: "HEALTH";
  display:block;
  position:absolute;
  text-align:center;
  margin-top:-20px;
  width:200px;
  color:#fff;
  z-index:10;
  font-family:helvetica;
}
.health>div{
  border-radius:30px;
  height:40px;
  width:60%;
  background-color:rgba(255,255,255,0.8);
  position:relative;
  -webkit-box-shadow:inset 0 0 20px 3px rgba(255,255,255,0.6);
box-shadow:inset 0 0 20px 3px rgba(255,255,255,0.6);
}
.health>div:before{
  content: attr(data-health);
  display:block;
  position:absolute;
  left:0px;
  right:0px;
  text-align:center;
  top:12px;
  color:#000;
  font-size:14px;
  z-index:10;
  font-family:helvetica;
}