JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="bl70">
    <div class="bar">
      <div class="hpval">90/100</div>
      <div class="mpval">50/100</div>
      <div class="hpbar" style="width:90%"></div>
      <div class="mpbar" style="width:50%"></div>
      <div class="expbar" style="width:70%"></div>
    </div>
  </div>
</div>

CSS

.bar
{
    background: black url(http://greatkings.ru/bar.png) repeat-x;
    width: 100%;
}
.bar div
{
    height: 20px;
    display: block;
}
.bar .hpval,
.bar .mpval
{
    position: absolute;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    margin-top: 2px;
}
.bar .mpval
{
    margin-top: 22px;
}

.bar div.hpbar
{
    background: red url(http://greatkings.ru/bar.png) 0px -45px repeat-x;
}
.bar div.mpbar
{
    background: blue url(http://greatkings.ru/bar.png) 0px -65px repeat-x;
}
.bar div.expbar
{
    background: green url(http://greatkings.ru/bar.png) 0px -85px repeat-x;
    height: 5px;
}





.items .bl70
{
    margin-left: 67px;
}
.items .bar,
.items .bar .hpval,
.items .bar .mpval
{
    width: 248px;
}