JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>
      <div class="row1 one">
        <span class="text">One</span>
      </div>
    </td>
    <td>
      <div class="row1 two">
        <span class="text">Two</span>
      </div>
    </td>
    <td>
      <div class="row1 three">
        <span class="text">Three</span>
      </div>
    </td>
  </tr>
</table>

CSS

tr:hover > td > div {
  background-color: black;
}

.one {
  background-color: #0000FF;
  width: 200px;
  height: 30px;
}

.two {
  background-color: #ff0000;
  width: 200px;
  height: 30px;
}

.three {
  background-color: #00FF00;
  width: 200px;
  height: 30px;
}

.text {
  color: white;
}

/*.one:hover, .two:hover, .three:hover {
  background-color: #000;
}*/