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 tr td:last-child{
    font-size: 8pt;   
}
}