JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tournament">
  <p>
    &lt;GET system.template.tournament.date&gt; <progress id="value" max="8"></progress>
  </p>
  <button>Information</button>
  
<p class="playerNumber">
  <span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>
</div>

CSS

.tournament {
  background-color: #202020;
  width: 98%;
  margin-left: 1%;
  margin-top: 15px;
  height: 121px;
}

.tournament p {
  text-align: left;
  position: absolute;
  margin-top: 48px;
  margin-left: 20px;
}

.tournament button {
  margin-left: 90%;
  margin-top: 43px;
  border-radius: 100px;
  width: 135px;
  height: 35px;
  border-color: #666666;
}

.tournament progress {
  border-color: #666666;
  background-color: #202020;
  width: 285%;
  height: 45px;
  position: absolute;
  margin-top: -10px;
  margin-left: 0px;
  z-index: 2;
}

progress::-moz-progress-bar { background: #151515; }
progress::-webkit-progress-value { background: #151515; }
progress { color: #151515; }

.playerNumber {
  text-align: left;
  color: red;
  left: 300px;
  top: 10px;
  z-index: 3;
  display:block;
}