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">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.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>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></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-table5" data-toggle="tab">Anniversaries by Month</a>
            </li>
            <li>
              <a href="#tab-table3" data-toggle="tab">Contact Information</a>
            </li>
              <li>
              <a href="#tab-table4" data-toggle="tab">Bithdays By Month</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>
                           ...

CSS

.container {
  margin-top: 10px;
}

JavaScript

var data = [
{
	"Name": "Beerus Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"September",
  "HireDate": "7/16/2021",
  "HireDateThisMonth": "No",
   "HireMonth":"July",
  "YearsWorkedHere": "2.0000",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Cletus Dev",
  "Birthday": "12/20/1998",
  "BirthdayThisMonth": "No",
  "BirthMonth": "December",
  "HireDate": "5/12/2020",
  "HireDateThisMonth": "No",
  "HireMonth": "May",
  "YearsWorkedHere": "1",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Krillin Dev",
  "Birthday": "9/11/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"September",
  "HireDate": "4/13/2021",
  "HireDateThisMonth": "No",
  "HireMonth":"April",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Goten Dev",
  "Birthday": "4/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"April",
  "HireDate": "11/19/2021",
  "HireDateThisMonth": "No",
   "HireMonth":"November",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Trunks Dev",
  "Birthday": "3/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"March",
  "HireDate": "5/16/2021",
  "HireDateThisMonth": "No",
  "HireMonth":"May",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "MajinBuu Dev",
  "Birthday": "10/07/2021",
  "BirthdayThisMonth": "Yes",
  "BirthMonth":"September",
  "HireDate": "10/16/2021",
  "HireDateThisMonth": "Yes",
  "HireMonth": "October",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Andorid Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"September",
  "HireDate": "9/16/2021",
  "HireDateThisMonth": "No",
  "HireMonth":"September",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Andorid Dev",
  "Birthday": "01/07/2021",
  "BirthdayThisMonth": "No",
 ...