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:#FF0000;
}
.yellow {
    background-color:#FFFF00;
}

JavaScript

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

for (i = 0; i < rows.length; i++) {
    row = rows[i].getElementsByTagName('td');
    var cell = getText(row[0]);
    if (cell === 'R') rows[i].className = "red";
    else if (cell === 'Y') rows[i].className = "yellow";
}

function getText(cell) {
    return (cell.innerText == undefined) ? cell.textContent : cell.innerText;
}