JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" id="example">
  <thead style="background:#C0C0C0;">
    <tr>
      <th colspan="5">first headline</th>
    </tr>
    <tr>
      <th style="padding-left: 15px;"> Id </th>
      <th> Product Name </th>
      <th> Total Events </th>
      <th> Total Revenue </th>
      <th> Rental Time </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>$372,000</td>
      <td>New York</td>
      <td>4804</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>$137,500</td>
      <td>San Francisco</td>
      <td>9608</td>
    </tr>
  </tbody>
	            
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

JavaScript

$(document).ready(function() {
    $('#example').DataTable();
} );