JSFiddle - React, Tailwind, and code Playground

by Anurag Malhotra

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);
}

tbody tr:hover{
  background: #F0F8FD;
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}