JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
  <table class="table table_mem">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body { padding-top: 1em; }

.table_mem,
.table_mem thead th,
.table_mem tbody tr,
.table_mem tbody td {
  border: 1px solid #000000 !important;
  border-radius: 20px;
  border-collapse: collapse;
  text-align: center;
  padding: 7px;
}

.table_mem thead th {
  background-color: #9e9e9e;
}

.table_mem tbody tr {
  background-color: #e5e5e5;
  transition: .5s;
}

.table_mem tbody tr:hover {
  background-color: #bfbfbf;
}

JavaScript

// bootstrap 3.3.6
// jquery 2.2.1
// fontawesome 4.5.0