JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="stage-statusbar" style="-webkit-transform: translateY(0px);">
        <div id="stage-statusbar-progress">
            <div id="stage-progress-bg">
                <div id="stage-progress-bar" style="-webkit-transform: translateX(202px);"></div>
            </div>
            <i class="pf-progress-arrow" style="-webkit-transform: translateX(202px);"></i></div>
        <div id="stage-statusbar-stamina">
            <div id="stage-stamina-gauge">
                <div id="stage-stamina-gauge-bg"><b id="stage-stamina-gauge-bar"></b></div>
            </div>
            <div class="value"><p id="stage-stamina-value"><b data-num="0"></b><b data-num="0"></b></p>

                <p id="stage-stamina-max"><b data-num="2"></b><b data-num="0"></b></p></div>
        </div>
        <div id="stage-statusbar-jewel"><b class="value">90</b>/<span class="max">100</span></div>
        <div id="stage-statusbar-stars">
            <mark class="star" name="0"><span class="mask"><i class="color" style="left: 19px;"></i></span></mark>
            <mark class="star" name="1"><span class="mask"><i class="color" style="left: 19px;"></i></span></mark>
            <mark class="star" name="2"><span class="mask"><i class="color" style="left: 19px;"></i></span></mark>
            <mark class="star" name="3"><span class="mask"><i class="color" style="left: 19px;"></i></span></mark>
            <mark class="star" name="4"><span class="mask"><i class="color" style="left: 9.5px;"></i></span></mark>
        </div>
        <p id="stage-statusbar-message" data-type="stamina">スタミナがなくなりました</p>

        <div class="pf-cssbtn" data-code="global-menu" data-color="br" data-type="square" id="stage-global-menu">
            <div class="pf-cssbtn-outer-box">
                <div class="pf-cssbtn-inner-box"></div>
            </div>
        </div>
    </div>

CSS

#stage-progress {
  height: 10px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 16px;
}
#stage-progress .progress {
  height: 10px;
  font-size: 8px;
  line-height: 1;
  font-weight: bold;
  color: rgba(102, 193, 255, 0.7);
}
#stage-progress .progress span {
  font-size: 9px;
}
#stage-progress .pf-gauge {
  background: #000033;
  width: 160px;
  height: 5px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 2px 0 0 5px;
}
#stage-progress .pf-gauge-bg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAKCAYAAADFJIcUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxMy4yLjImZUYJAAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAAm0lEQVRoge3asQ3CMBBA0e+wACVKg5gAJA8DJaNkBTpKL2QJNsAVY0ARYIPkJPJfedUvbd0lfvIAnIEtkvSfGlCgDgBpnOUbsI8qkqSZ3aEeVp+X3zG6RpJmtIE+JcgP/PZKWp6WIL+iKyQpQhcdIElROsatiCQtTeuAEl0hSQGKZzCSluh7BgPwvEKfgB2wjqySpAk14AL1BPAGPTwV+GbkSxIAAAAASUVORK5CYII=');
  -webkit-mask-size: 160px 5px;
  background-color: transparent;
}

#stage-statusbar-progress::before, #stage-statusbar-progress::after, .pf-progress-arrow::before, #stage-statusbar-stamina.max #stage-stamina-gauge::before, #stage-statusbar-jewel::after, #stage-statusbar-message::before {
  zoom: 0.5;
}

#stage-statusbar {
  position: absolute;
  top: 0;
  left: 50%;
  height: 90px;
  width: 320px;
  margin-left: -160px;
  -webkit-transform: translate(0, -60px);
  transform: translate(0, -60px);
  z-index: 1;
}
#stage-statusbar div, #stage-statusbar i {
  position: absolute;
}

#stage-statusbar-progress,
#stage-progress-bar,
#stage-progress-color {
  display: block;
  width: 204px;
  height: 13px;
}

#stage-statusbar-progress {
  left: 60px;
  top: 10px;
  background-image:...