JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.semanticui.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.semanticui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table id="example" class="ui orange compact selectable striped celled table" style="width:100% !important;">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Last Login</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>10/09/16</td>
<td>
<a href="#" class="action_link" data-tooltip="Edit" data-inverted="" data-position="top right">
<i class="fa fa-edit"></i>
</a>
<a href="#" class="action_link" data-tooltip="De-activate User" data-inverted="" data-position="top right">
<i class="fa fa-unlock"></i>
</a>
<a href="#" class="action_link" data-tooltip="Reset Password" data-inverted="" data-position="top right">
<i class="fa fa-refresh"></i>
</a>
<a href="#" class="action_link" data-tooltip="User Roles" data-inverted="" data-position="top right">
<i class="fa fa-user-circle-o"></i>
</a>
<a href="#"...
JavaScript
$('#example').DataTable();