JSFiddle - React, Tailwind, and code Playground

HTML

<table id="port1">
    <tbody>
        <tr><th>Контакт #</th><th>Назначение</th></tr>
        <tr><td>1</td><td>GND</td></tr>
        <tr><td>2</td><td>A+ (Передача данных)</td></tr>
        <tr><td>3</td><td>A− (Передача данных)</td></tr>
        <tr><td>4</td><td>GND</td></tr>
        <tr><td>5</td><td>B− (Прием данных)</td></tr>
        <tr><td>6</td><td>B+ (Прием данных)</td></tr>
        <tr><td>7</td><td>GND</td></tr>
        <tr><td>—</td><td>Замок</td></tr>
    </tbody>
</table>
<table id="port2">
    <tbody>
        <tr><th>Контакт #</th><th>Назначение</th></tr>
        <tr><td>1</td><td>GND</td></tr>
        <tr><td>2</td><td>A+ (Передача данных)</td></tr>
        <tr><td>3</td><td>A− (Передача данных)</td></tr>
        <tr><td>4</td><td>GND</td></tr>
        <tr><td>5</td><td>B− (Прием данных)</td></tr>
        <tr><td>6</td><td>B+ (Прием данных)</td></tr>
        <tr><td>7</td><td>GND</td></tr>
        <tr><td>—</td><td>Замок</td></tr>
    </tbody>
</table>

CSS

table {
    float:left;
}
table tr:nth-child(2), table tr:nth-child(5), table tr:nth-child(8) {
    background-color:#c0c0c0;
}

#port1 tr:nth-child(3), #port2 tr:nth-child(7) {
    background-color:#ff0000;
}
#port1 tr:nth-child(4), #port2 tr:nth-child(6) {
    background-color:#0000ff;
}

#port1 tr:nth-child(6), #port2 tr:nth-child(4) {
    background-color:#00ff00;
}

#port1 tr:nth-child(7), #port2 tr:nth-child(3) {
    background-color:#00ffff;
}