JSFiddle - React, Tailwind, and code Playground

HTML

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<h2>Index</h2>

<table class="table" id="products" >
    <tr>
        <th>
            Code
        </th>
        <th>
            Name
        </th>
        <th>
            Category
        </th>
        <th>
            Active
        </th>
        <th>
            Published
        </th>
    </tr>

    <tr>
        <td>
            123-456
        </td>
        <td>
            Option on a Module
        </td>
        <td>
            Option
        </td>
        <td>
            Yes
        </td>
        <td>
            Yes
        </td>
        <td>
            - Details -
        </td>
    </tr>


</table>

CSS

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

JavaScript

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