JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/**
Template Name: all all
 */

get_header(); ?>
  <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/page-templates/jmap/jquery-jvectormap.css"/>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>

	<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
	<script src=" https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
	
 
</head>


 

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		
		<div class="div0">
	
<div id="entries2"  ></div>	
	
<input type="text" id="search1" placeholder="enter name" style="width:25%;  margin-bottom:15px;"></input>

	
 <select id="dropdown1" style="width:25%;  margin-bottom:15px;" >

 <option value="">All places</option>
  <option value="two">two</option>
  <option value="three">three</option>
  <option value="one">one</option>
  <option value="four">four</option>
  
  
 
</select>
<select id="dropdown2" style="width:25%;  margin-bottom:15px;" >

<option value="">all types</option>
  <option value="1">1</option>
  <option value="2">2</option>
    <option value="3">3</option>
</select>



<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Place</th>
                <th>Type</th>
                <th>link 1</th>
                <th>link 2</th>
                
            </tr>
        </thead>
        <tfoot>
            <tr>
               <th>Name</th>
                <th>Place</th>
                <th>Type</th>
                <th>link 1</th>
                <th>link 2</th>
                
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>My junk</td>
    ...

CSS

table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}

table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}

table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}

table.dataTable thead th:active,table.dataTable thead td:active{outline:none}

table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}

table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer;*cursor:hand}

table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}

table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}

table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}

table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}

table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}

table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}

table.dataTable tbody tr{background-color:#ffffff}

table.dataTable tbody tr.selected{background-color:#B0BED9}

table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}

table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}

table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}

table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid...

JavaScript

$(document).ready(function()  {
		$('#example').DataTable( {
      
		responsive: true,
		
		"aLengthMenu": [[5, 20, 30, -1], [ 5, 20, 30, "All"]],
        "iDisplayLength": -1,
		fnInitComplete : function( oSettings, json ){
		$('#example_length').detach().prependTo("#entries2");}
		
    } ); 
	 
	 
   var table =  $('#example').DataTable();
		
    
     $('#dropdown1').on('change', function () {
                    table.columns(1).search( this.value ).draw();
                } );
                $('#dropdown2').on('change', function () {
                    table.columns(2).search( this.value ).draw();
                } );
                $('#search1').on('change', function () {
                    table.columns(0).search( this.value ).draw();
                } );
});