JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<section class="section-padding extra-margin-top">
  <div class="container">
      <div class="row">
          <div class="col-md-12">

<div class="bd-example">
  <table class="table table-hover table-responsive">
    <thead class="thead-inverse">
      <tr>
        <th>Student ID</th>
        <th>Username</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Subjects</th>
        <th>Teachers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>@mdo, @sds</td>
        <td>@mdo, Geoms</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
    </tbody>
  </table>

</div>
</div>
</div>
</div>
</section>

CSS

body {
	background: #fff;
}
.bd-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -1rem;
    border: solid #f7f7f9;
    border-width: .2rem 0 0;
}
table {
    border-collapse: collapse;
    background-color: transparent;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}
thead th {
    color: #fff;
    background-color: #292b2c;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #eceeef;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #eceeef;
}