JSFiddle - React, Tailwind, and code Playground

by kakss

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Company</th>
      <th>Employees</th>
      <th>Customers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anurag</td>
      <td>ToTheNew</td>
      <td>440</td>
      <td>3549</td>
    </tr>
    <tr>
      <td>Amit</td>
      <td>ToTheNew</td>
      <td>440</td>
      <td>3549</td>
    </tr>
    <tr>
      <td>Prince</td>
      <td>ToTheNew</td>
      <td>440</td>
      <td>3549</td>
    </tr>
    <tr>
      <td>Parveen</td>
      <td>ToTheNew</td>
      <td>440</td>
      <td>3549</td>
    </tr>
    <tr>
      <td>Vijay</td>
      <td>ToTheNew</td>
      <td>440</td>
      <td>3549</td>
    </tr>
  </tbody>
</table>

CSS

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  background: #fff;
  width: 100%;
  text-align: left;
}

td,
th {
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
  box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
  background: rgba(255, 255, 255, 0.902);
}

tbody tr:hover {
  background: #F0F8FD;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  xbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -xwebkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -xmoz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  -webkit-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.mailrow {
  -webkit-box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
  box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
  background: rgba(255, 255, 255, 0.902);
}

.mailrow:hover {
  -webkit-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  z-index: 1;
}