JSFiddle - React, Tailwind, and code Playground

HTML

<table class="avatarStats" width="200" border="0">
  <tr>
    <td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
    <td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
  </tr>
  <tr>
      <td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
      <td bgcolor="teal"><dev font-size: 10pt;>OVERALL</div><br /><strong>1737</strong></td>
  </tr>
</table>

CSS

table.avatarStats {
	border-spacing: 0;
  	border-collapse: collapse;
	text-align: center;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}
table.avatarStats tr td strong{
font-size:9pt;    
font-weight:bold;
color:black
}