JSFiddle - React, Tailwind, and code Playground

HTML

<table class="avatarStats">
  <tr>
    <td>RECENT WR<br/><span>61%</span></td>
    <td>OVERALL<br/><span>55%</span></td>
  </tr>
  <tr>
      <td>RECENT WN8<br/><span>2469</span></td>
      <td>OVERALL<br/><span>1737</span></td>
  </tr>
</table>

CSS

table.avatarStats {
    border-spacing: 0px;
    text-align: center;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
    width: 108px;
}

table.avatarStats td {
    font-size: 7px;
    width: 50px;
    padding: 2px;
}

table.avatarStats td span {
    font-size: 16px;
}

table tr td:first-child {
    background-color: #7842B3;
}

table tr td:last-child {
    background-color: #459ABD;
}