JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<input type="text" id="min-date" class="form-control date-range-filter calendar" placeholder="From:">    
<input type="text" id="max-date" class="form-control date-range-filter calendar" placeholder="To:">
 
<table class="display nowrap table_master" id="table_master" cellspacing="0" width="100%" style="">
					<thead>						
						<tr>
							<th>ID</th>
							<th>Head1</th>
							<th>Head2</th>
						</tr>
					</thead>			

					<tbody>						
						<tr>
							<td>1</td>
							<td>Body1</td>
							<td>19/06/2018</td>							
						</tr>		
						
						<tr>
							<td>2</td>
							<td>Body2</td>
							<td>20/06/2018</td>							
						</tr>
						
						<tr>
							<td>3</td>
							<td>Body3</td>
							<td>21/06/2018</td>							
						</tr>

						<tr>
							<td>4</td>
							<td>Body4</td>
							<td>22/06/2018</td>							
						</tr>	

						<tr>
							<td>5</td>
							<td>Body5</td>
							<td>23/06/2018</td>							
						</tr>							
						
						<tr>
							<td>6</td>
							<td>Body6</td>
							<td>24/06/2018</td>							
						</tr>		
						
						<tr>
							<td>7</td>
							<td>Body7</td>
							<td>25/06/2018</td>							
						</tr>									
					</tbody>		
			</table>

CSS

.ui-datepicker {
	background-color:#ffffff;
	font-size:11px;
	padding:15px 5px 15px 5px;
	border:0px solid #ccc;
	display:none;
	box-shadow:inset 0 100px 100px 1px #ffffff, 0px 0px 15px 1px rgba(0, 0, 0, 0.13);
}
 
.ui-datepicker table {
    width:322px;
    border:0px solid #3b5467;
    border-left:0!important;
    margin:10px 0 0 0;
}
 
.ui-datepicker table td {
	text-align:center;
	border:1px solid #142e41;
	border-width:0 0 0 0!important;
	transition:0.2s;
	padding:15px 15px 15px 15px!important;
	border-radius:50%;
	box-shadow:0 0 0;	
}
.ui-datepicker table td:hover{
    background-color:#daebf1;       
}
.ui-datepicker tbody tr:hover{
	background-color:transparent;
}
.ui-datepicker table tbody{
	border-top:1px solid #c12!important;	
}
.ui-datepicker table th{
    background-color:transparent;
    border:0; 
    border-right:0!important;       
    padding:3px 0 3px 0!important;    
    text-align:center;
    float:;
    color:#86aac7;
} 
.ui-datepicker a {
	cursor:pointer;
	text-decoration:none;
	color:#256998;
	border-radius:50%;
}

.ui-datepicker tbody td:first-child{
	background-color:transparent;
}
 
.ui-datepicker-prev {
    width:15px;
    height:13px;
	float:left;
	background:url(../imgs/calendar/arrow-left.png)no-repeat center;
	background-size:contain;
	opacity:0.3;
}
 
.ui-datepicker-next {
    width:15px;
    height:13px;
    float:right;
    background:url(../imgs/calendar/arrow-right.png)no-repeat center;
	background-size:contain;
	opacity:0.3;
}
 
.ui-datepicker-title {
	text-align: center;
	font-weight:bold;
	color:#0e0e0e;
}
.ui-state-highlight{	
	background-color:#c9e0e8;	
	box-shadow:0px 0px 0px 15px #c9e0e8,0px 5px 0px 10px #c9e0e8,0px -5px 0px 10px #c9e0e8;		
}
.ui-state-active{
	background-color:#daebf1;	
	box-shadow:0px 0px 0px 15px #daebf1,0px 5px 0px 10px #daebf1,0px -5px 0px 10px #daebf1;	
}

JavaScript

/* ........................................ calendar ........................................ */

		$( ".calendar" ).datepicker({
			dateFormat: 'dd/mm/yy',
			startDate: '-3d',
			dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
			dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
			dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
			monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
			monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
			nextText: '',
			prevText: ''
		});

  /* ....................................... /calendar ........................................ */
  
  /* -- */
  
  /* .......................... dataTable filtrando por data ................................   */
 table = $('.table_master').DataTable({
      paging: false,
      info: false
    });
    
    // Extend dataTables search
	$.fn.dataTable.ext.search.push(
	  function(settings, data, dataIndex) {
		var min = $('#min-date').val();
		var max = $('#max-date').val();
		var createdAt = data[1] || 0; // Our date column in the table

		if (
			  (min == "" || max == "") ||
			  (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
		){
		  
		  return true;
		  
		}
			
			return false;
			//table.draw();
			
	  }
	);
	
	$('.date-range-filter').change(function() {  	
		table.draw();
	});
  /* ......................... /dataTable filtrando por data ................................   */
  
  /* -- */