JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<head>
<meta http-equiv='pragma' content='no-cache' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='expires' content='-1' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS for Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--JS for Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--
.navbar
overides Bootstraps default rounded edges on navbars.
table.sortable
adds arrows to headers to indicate that they are sortable.
-->
<style>
.navbar{
border-radius: 0px
}
</style>
<title id='title'> - SI Tools</title>
</head>
<body>
<h2 class="display-1">Bootstrap 4 Inverse Table</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...