JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table-container">


<div class="filters">
        <div class="input-group date datetimepicker">
            <input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    
        <div class="input-group date datetimepicker">
            <input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
</div>


<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
               ...

CSS

tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
    .table-container{
      position: relative;
      margin: 20px;
    }
    .filters {
      position: absolute;
      top: 0;
      right: 0;
    }
    .datetimepicker{
      width: 180px;
      float: left;
      margin-left: 10px; 
    }
    .form-control {
      height: 30px;
    }

JavaScript

$(document).ready(function() {
   var total = $("#example tfoot th").length;

            $("#example tfoot th").each(function (index) {
                if (index !== total - 1) {
                    var title = $(this).text().trim();
                    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title +'"/>');
                }
            });


            var table = $("#example").DataTable({
                "bFilter": false // hide searchbox
            });

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change',
                    function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
} );