JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
<script...

CSS

h5{
text-align: center;
font-size: 40px;
}
.dataTable > thead > tr > th[class*="sort"]:before,
.dataTable > thead > tr > th[class*="sort"]:after {
    content: "" !important;
}
.right {
  float: right;
}
.toolbar{
  float: left;
}
.FilterStuff>div{float:none;}
.dataTables_wrapper .FilterStuff .dataTables_filter {float:left}
.title {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:12px;
margin-bottom:20px;
padding-bottom:10px;
}
span {
color:#666666;
font-size:12px;
margin-bottom:1px;

}
.btn{
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
border: 1px solid #B7DDF2;

}
.table th {
    text-align: center;
}
.table td{
    padding: 3px;
}
.dtrg-level-0::after {
 text-align: center;
}
.btn:hover{
color: #333333;
background-color: #e6e6e6;
}
th { font-size: 14px; }
td { font-size: 12px; text-align: center;}
div.container {
min-width: 980px;
margin: 0 auto;
}
.header {
padding: 10px;
text-align: center;
}

body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.dt-button-collection {
position: static;
}
table.dataTable tr.dtrg-group.green td {
background-color: #66b266 !important;
}
table.dataTable tr.dtrg-group.yellow td {
background-color: #ffff66 !important;
}
table.dataTable tr.dtrg-group.red td {
background-color: #ff6666 !important;
}
.green {
background-color: #66b266 !important;
}
.red {
background-color: #ff6666 !important;
}
.yellow {
background-color: #ffff66 !important;
}

JavaScript

//document.getElementById('form-control form-control-sm input').type = 'date';


/* var n = document.createElement('script');
n.setAttribute('language', 'JavaScript');
n.setAttribute('src', 'https://debug.datatables.net/debug.js');
document.body.appendChild(n);moment.suppressDeprecationWarnings = true; */

var data = [{
  "Department": "IT",
  "Employee": "Beerus Dev",
  "Monday": "05/24/2021",
  "MondayStatus": "P",
  "MondayLocation": "Office",
  "Tuesday": "05/25/2021",
  "TuesdayStatus": "P",
  "TuesdayLocation": "Office",
  "Wednesday": "05/26/2021",
  "WednesdayStatus": "P",
  "WednesdayLocation": "Office",
  "Thursday": "05/27/2021",
  "ThursdayStatus": "P",
  "ThursdayLocation": "Office",
  "Friday": "05/28/2021",
  "FridayStatus": "P",
  "FridayLocation": "Office"
},
{
  "Department": "BD",
  "Employee": "Goku Dev",
  "Monday": "05/17/2021",
  "MondayStatus": "P",
  "MondayLocation": "Office",
  "Tuesday": "05/18/2021",
  "TuesdayStatus": "P",
  "TuesdayLocation": "Office",
  "Wednesday": "05/19/2021",
  "WednesdayStatus": "P",
  "WednesdayLocation": "Office",
  "Thursday": "05/20/2021",
  "ThursdayStatus": "TW",
  "ThursdayLocation": "Office",
  "Friday": "05/21/2021",
  "FridayStatus": "P",
  "FridayLocation": "Office"
},
{
  "Department": "IT",
  "Employee": "Shap Dev",
  "Monday": "03/15/2021",
  "MondayStatus": "P",
  "MondayLocation": "Office",
  "Tuesday": "03/16/2021",
  "TuesdayStatus": "P",
  "TuesdayLocation": "Office",
  "Wednesday": "03/17/2021",
  "WednesdayStatus": "P",
  "WednesdayLocation": "Office",
  "Thursday": "03/18/2021",
  "ThursdayStatus": "P",
  "ThursdayLocation": "Office",
  "Friday": "03/19/2021",
  "FridayStatus": "P",
  "FridayLocation": "Office"
}
];

$(document).ready(function() {
    moment.suppressDeprecationWarnings = true;

$.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter, statusClass, data ) {
        var now = moment();
        var monday = now.clone().weekday(1);
       ...