JSFiddle - React, Tailwind, and code Playground

by BeerusDev

HTML

<!DOCTYPE html>
<html>
  <head>
  <!--Stylesheets-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap.min.css">
  <!--Scripts-->
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.2/js/dataTables.bootstrap.min.js"></script>
  </head>
</html>

<div class="container">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active">
                <a href="#tab-table1" data-toggle="tab">Birthdays</a>
            </li>
            <li>
                <a href="#tab-table2" data-toggle="tab">Anniversaries</a>
            </li>
            <li>
              <a href="#tab-table3" data-toggle="tab">Contact Information</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab-table1">
                <table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Birthday</th>
                            <th>Birthday This Month</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tab-pane" id="tab-table2">
                <table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Hire Date</th>
                            <th>Hired This Month</th>
                            <th>Years Worked Here</th>
              ...

CSS

.container {
  margin-top: 10px;
}

JavaScript

var data = [
{
	"Name": "Beerus Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "HireDate": "9/16/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2.0000",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Krillin Dev",
  "Birthday": "9/11/2021",
  "BirthdayThisMonth": "Yes",
  "HireDate": "9/13/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Goten Dev",
  "Birthday": "4/07/2021",
  "BirthdayThisMonth": "No",
  "HireDate": "9/19/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Trunks Dev",
  "Birthday": "3/07/2021",
  "BirthdayThisMonth": "No",
  "HireDate": "5/16/2021",
  "HireDateThisMonth": "No",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "MajinBuu Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "HireDate": "10/16/2021",
  "HireDateThisMonth": "No",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Andorid Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "HireDate": "9/16/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
}
];
$(document).ready(function(){

$.fn.dataTable.ext.search.push(
    function( settings,searchData, data, dataIndex ) {
    var bdayBool = searchData[2];
    var hireBool = searchData[2];
    if ( settings.sTableId === 'myTable1' ) {
      if(bdayBool === "Yes"){
      return true;
      } else {
        return false;
     }
           if ( settings.sTableId === 'myTable2' ) {
        if(hireBool === "Yes"){
          return true;
        } else {
          return false;
        }

      }
    }

      return true;

});

  var table = $('#myTable1').DataTable({
    data: data,
    paging: false,
    "columns": [
      { "data": "Name", 
      "width": "33%" },
      {...