JSFiddle - React, Tailwind, and code Playground

HTML

<table id='trans_separate'>
    <tbody>
        <tr>
            <td>R</td>
            <td>red test</td>
        </tr>
        <tr>
            <td>Y</td>
            <td>yellow test</td>
        </tr>
    </tbody>
</table>

CSS

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

JavaScript

var rows = document.getElementById("trans_separate").getElementsByTagName("tbody")
  [0].getElementsByTagName("tr");

    // loops through each row
    for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
            if (cells[0].innerHTML == 'R')
                rows[i].className = "red";

            if (cells[0].innerHTML == 'Y')
                rows[i].className = "yellow";           
 }