JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="tablewrap">
    normal
    <br/>
    <table>
      <tbody>
        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="tablewrap">
    smooth
    <br/>
    <table class="smooth">
      <tbody>
        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>

        <tr>
          <td>hover test</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

body {
	  text-align: center;
	  padding: 5% 5%
	}
	
	.tablewrap {
	  width: 10em;
	  margin-right: 2em;
	  display: inline-block
	}
	
	table {
	  width: 100%;
	  overflow: hidden;
	  border-radius: .5em;
	  box-shadow: 0px 0px 7px gray;
	  border-collapse: collapse
	}
	
	td {
	  padding: 0.3em 0;
	  text-align: center;
	  cursor: pointer
	}
	
	tr:hover {
	  background-color: #DDF;
	  background-color: linear-gradient(#DDF, #CCE)
	}
	
	.smooth tr {
	  transition: background-color 180ms ease-in-out
	}
	
	.smooth tr:hover {
	  transition: background-color 33ms ease-in-out
	}