JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selectors">
  <table class="table">
    <thead>
      <tr>
        <th>Teams</th>
        <th>Capitains</th>
        <th>AWPers</th>
        <th>Riflers</th>
        <th>Riflers</th>
        <th>Supports</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="navi">Na'Vi</td>
        <td class="gambit">Nafany</td>
        <td class="vp">Jame</td>
        <td class="gambit">Axile</td>
        <td class="spirit">s1ren</td>
        <td class="navi">Perfecto</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td class="gambit">Gambit</td>
        <td class="navi">BoomBl4</td>
        <td class="spirit">degster</td>
        <td class="spirit">magixx</td>
        <td class="navi">b1t</td>
        <td class="gambit">interz</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td class="vp">Virtus Pro</td>
        <td class="spirit">chopper</td>
        <td class="navi">s1mple</td>
        <td class="vp">YEKINDAR</td>
        <td class="gambit">Hobbit</td>
        <td class="vp">Qikert</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td class="spirit">Team Spirit</td>
        <td class="vp">FL1T</td>
        <td class="gambit">sh1ro</td>
        <td class="navi">electronic</td>
        <td class="vp">boster</td>
        <td class="spirit">Patsi</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.navi:hover {
  background: #ccc;
}