JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<div class="table-nav">
    <a href="#">Show Table 1</a>
    <a href="#">Show Table 2</a>
    <a href="#">Show Table 3</a>
</div>

<div class="container">
	<table id="myTable" class="display">
	    <thead>
	        <tr>
	            <th>Organization</th>
	            <th>Name</th>
	            <th>Phone</th>
	            <th>Title</th>
	            <th>Email</th>
	            <th>Address</th>
	        </tr>
	    </thead>
	    <tbody>
	        <tr>
	        	<td>Data 1</td>
	            <td>Data 2</td>
	            <td>Data 3</td>
	            <td>Data 4</td>
	            <td>Data 5</td>
	            <td>Data 6</td>
	        </tr>
	    </tbody>

	</table>	
</div>

CSS

*{
    font-family: Helvetica, Arial, sans-serif;
}

.table-nav{    
    margin-bottom: 20px;
}
    .table-nav a{
        background: #666;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        display: inline-block;
        margin-right: 20px;
        padding: 5px 15px;
        text-decoration: none;
    }
    .table-nav a:hover{
        background: #888;
    }

JavaScript

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