JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
<h5><strong>Attendance Report</strong></h5>
        <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
                <thead class="thead-dark">
                    <tr>
        ...

CSS

h5{
text-align: center;
font-size: 40px;
}
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;

}

.btn:hover{
color: #333333;
background-color: #e6e6e6;
}

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;
}
.red {
background-color: #ff6666 !important;
}
.yellow {
background-color: #ffff66 !important;
}

JavaScript

var dataSet =[
["IT", "Name 1","Locations Here","05/02/2021","05/03/2021","P", "05/04/2021","P","05/05/2021","P","05/06/2021", "P", "05/07/2021", "P"],
["OM", "Name 1","Locations Here","05/02/2021","05/03/2021","P", "05/04/2021","P","05/05/2021","P","05/06/2021", "P", "05/07/2021", "P"],
["IT", "Name 2","Locations Here","03/14/2021","03/15/2021","P", "03/16/2021","P","03/17/2021","P","03/18/2021", "P", "03/19/2021", "P"],
["HR", "Name 1","Locations Here","04/25/2021","04/26/2021","P", "04/27/2021","P","04/28/2021","P","04/29/2021", "P", "04/30/2021", "P"],
["OM", "Name 1","Locations Here","04/25/2021","04/26/2021","P", "04/27/2021","P","04/28/2021","P","04/29/2021", "P", "04/30/2021", "P"]];

moment.suppressDeprecationWarnings = true;
    
$(document).ready(function() {
    
    $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var now = moment();
        var sunday = now.clone().weekday(0);
        var friday = now.clone().weekday(5);
        
        let sundayF = sunday.format('MM/DD/YYYY');
        let fridayF = friday.format('MM/DD/YYYY');
        
        //console.log(sundayF); 
        //console.log(fridayF);
        
        var sSunday = searchData[3];
        var sFriday = searchData[12];
        
        if (sundayF == sSunday && fridayF == sFriday) {
            return true;
        }
        return false;
    }
);
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
        data : dataSet,
            "createdRow": function( row, data, dataIndex ) {
                if ( data[5] == "TW" || data[5] == "P") {
                    $('td', row).eq(2).addClass( 'green' );
                } 
                if (data[5] == "PTO" || data[5] == "H") {
                    $('td', row).eq(2).addClass( 'red' );
                }
                if ( data[5] == "NR" || data[5] == "O") {
                    $('td',...