JSFiddle - React, Tailwind, and code Playground

by Christopher O

HTML

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Phone number</th>
      <th>Date</th>
      <th>Name</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0342443</td>
      <td>10 August 2013</td>
      <td>Kate</td>
      <td>Loves cats</td>
    </tr>
    <tr>
      <td>0342442</td>
      <td>9 August 2013</td>
      <td>Mary</td>
      <td>Boring</td>
    </tr>
    <tr>
      <td>0342441</td>
      <td>8 August 2013</td>
      <td>Anna</td>
      <td>Loves extreme stuff</td>
    </tr>
  </tbody>
</table>

CSS

table {
  box-sizing: border-box;
  /* border-bottom: 1px solid #e8e8e8; */
  border-spacing: 0 15px;
  border: 0;
}

td,
th {
  padding-left: 16px;
  min-width: 170px;
  border: 0;
  font: 14px/40px;
  text-align: left;
}

td {
  color: #666;
}

tr {
  display: block;
}

th {
  color: #333;
}

tr:hover {
  background-color: #fbfbfb;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}