JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr class="live al tv">
    <td>October 2</td>
    <td>12:30 pm</td>
    <td class="competition"></td>
    <td>Team A v Team B</td>
    <td class="field">1</td>
  </tr>
  <tr class="be tv">
    <td>October 2</td>
    <td>6 pm</td>
    <td class="competition"></td>
    <td>Team C v Team D</td>
    <td class="field">2</td>
  </tr>
  <tr class="ga tv">
    <td>October 3</td>
    <td>12:30 pm</td>
    <td class="competition"></td>
    <td>Team D v Team A</td>
    <td class="field">3</td>
  </tr>
  <tr class="live de tv">
    <td>October 3</td>
    <td>6 pm</td>
    <td class="competition"></td>
    <td>Team C v Team B</td>
    <td class="field">4</td>
  </tr>
</table>

CSS

table, td {border:1px solid #555; color:#000;}
table {background:#555;}
td {padding:10px;background:#fff;}

JavaScript

var compClass = {
    'al' : 'alpha',
    'be' : 'beta',
    'ga' : 'gamma',
    'de' : 'delta'
}
var k = Object.keys(compClass);

$('tr[class]').each(function() {
    var cls = this.className.split(' ');
    
    var f = $.grep(cls, function(value, i) {
        return k.indexOf(value) > -1;
    })[0];
    if (f) this.children[2].innerHTML = compClass[f];
});