JSFiddle - React, Tailwind, and code Playground

HTML

<table class="testtable">
  <col />
  <col />
  <col />
  <col />
  <thead>
    <tr class="testtr">
      <th class="testth">Name</th>
      <th class="testth">Age</th>
      <th class="testth">Birthdate</th>
      <th class="testth">Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody>
    <tr class="testtr">
      <td class="testtd">Abraham Lincoln</td>
      <td class="testtd">204</td>
      <td class="testtd">February 12</td>
      <td class="testtd">Stovepipe</td>
    </tr>
    <tr class="testtr">
      <td class="testtd">Winston Churchill</td>
      <td class="testtd">139</td>
      <td class="testtd">November 30</td>
      <td class="testtd">Homburg</td>
    </tr>
    <tr class="testtr">
      <td class="testtd">Rob Glazebrook</td>
      <td class="testtd">32</td>
      <td class="testtd">August 6</td>
      <td class="testtd">Flat Cap</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}

.testtable {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}

.testth {
    text-align: left;
  }

 .testtr
   {
    transition: all .3s;
  }

  tbody .testtr:hover {
    background-color: rgba(0, 140, 203, .2);
  }
 
 .hover {
    background-color: rgba(0, 140, 203, .2);
  }

JavaScript

$('.testtd').hover(function() {
 $(this).parents('.testtable').find('col:eq('+$(this).index()+')').toggleClass('.hover');
});