JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-device ,initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src= "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>
</head>
<!--<style>
table,th,td{
border-collapse: collapse;
border: 1px solid black;
text-align: center;
}
</style>-->
<body>
<title>My Title</title>
<div class="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>Serial Number</th>
<th>Model</th>
<th>Vendor</th>
<th>EOS</th>
<th>Contract ID</th>
<th>Start Date</th>
<th>End date</th>
</thead>
<tfoot>
<tr>
<th>Serial Number</th>
<th>Model</th>
<th>Vendor</th>
<th>EOS</th>
<th>Contract ID</th>
<th>Start Date</th>
<th>End date</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>12345678</td>
<td>2960</td>
<td>Cisco</td>
...