JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Driver</th>
                <th>Profit</th>
                <th>Deliveries</th>
                <th>Distance</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>rank</td>
                <td>username</td>
                <td>€profit</td>
                <td>deliveries</td>
                <td>distance</td>
            </tr>
            <tr>
                <td>rank</td>
                <td>username</td>
                <td>€profit</td>
                <td>deliveries</td>
                <td>distance</td>
            </tr>
            <tr>
                <td>rank</td>
                <td>username</td>
                <td>€profit</td>
                <td>deliveries</td>
                <td>distance</td>
            </tr>
            <tr>
                <td>rank</td>
                <td>username</td>
                <td>€profit</td>
                <td>deliveries</td>
                <td>distance</td>
            </tr>
            <tr>
                <td>rank</td>
                <td>username</td>
                <td>€profit</td>
                <td>deliveries</td>
                <td>distance</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table {
  max-width: 100%;
  background-color: transparent;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) {
  background-color: #f00;
}
 
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody...