JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.1.7/datatables.min.js"></script>
  <div id="mainDiv" style="padding:25px; background-color:white;">
    <div class="col-sm-12">
        <div id="table_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer">
          <div class="row mt-2 justify-content-between"><div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto"></div>
            <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto">
              <div class="dt-search">
                <label for="dt-search-2">Search:</label>
                <input type="search" class="form-control form-control-sm" id="dt-search-2" placeholder="" aria-controls="table">
              </div>
            </div>
          </div>
          <div class="row mt-2 justify-content-between dt-layout-table">
            <div class="d-md-flex justify-content-between align-items-center col-12 dt-layout-full col-md">
              <table id="table" class="col-sm-12 table table-bordered table-sm table-hover w-100 hide dataTable" style="display: table; width: 100%;" aria-describedby="table_info">
                <colgroup>
                  <col data-dt-column="1" style="width: 142.075px;">
                  <col data-dt-column="2" style="width: 36.125px;">
                  <col data-dt-column="3" style="width: 107.925px;">
                  <col data-dt-column="4" style="width: 53.2875px;">
                </colgroup>
            <thead>
                <tr role="row">
                  <th data-dt-column="1"...

CSS

#table tr:nth-child(n):hover {
     --bs-table-bg: yellow;
 }

 /* tr.odd { */
 #table > tbody > tr:nth-child(2n+1) {
     --bs-table-bg: lightcyan;
 }

 /* tr.even { */
 #table > tbody > tr:nth-child(2n) {
     --bs-table-bg: #c5fbfb;
 }

 #table td, #table th {
     border: 0;
 }

 /* #table tr.odd td { */
 /* #table tr:nth-child(2n+1) td {
     border-top: 1px solid black;
 } */

 /* #table tr.even td { */
 #table tr:nth-child(n) td {
     border-top: 1px solid black;
 }

 #table thead th, #table tbody td {
     padding-top: 4px;
     padding-bottom: 4px;
 }

 #table td {
     max-width: 100%;
     white-space: normal;
     text-overflow: ellipsis;
     word-break: break-all;
     overflow: hidden;
 }

 #table_filter {
     position: absolute;
     right: 25px;
     top: 100px;
 }

 td input[type="checkbox"] {
     margin: 0 auto;
     width: 100%;
 }

 div.dataTables_filter {
     display: inline-block;
     margin-left: 1em;
     float: right;
 }

JavaScript

var dataSet = new Array(''[{"UnqMbrId":111111,"CommentNum":3,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:48.289605","Comments":"This is a comment 3.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0},{"UnqMbrId":111111,"CommentNum":2,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:35.902748","Comments":"This is a comment 2.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0},{"UnqMbrId":111111,"CommentNum":1,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:11.412695","Comments":"This is a comment 1.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0}]');

$("#table").DataTable({
    data: dataSet,
    destroy: true,
    columns: [
        {
            data: "CommentsDttm",
            visible: false,
            // render: function (data, type, row) { return moment(row.CommentsDttm).unix(); }
            render: function (data, type, row) { return new Date(row.CommentsDttm).getTime(); }
        },
        {
            data: "CommentsDttm",
            width: "15%",
            orderData: [0],
            // render: function (data, type, row) { return moment(row.CommentsDttm).format('MM/DD/YYYY') + '/' + row.CommentsUser; }
            render: function (data, type, row) { return new Date(row.CommentsDttm).toLocaleDateString('en-US').replace(/\d+/g, c => c.padStart(2, '0')) + '/' + row.CommentsUser; }
        },
        { data: "FLN", width: "12%", orderable: false },
        { data: "Comments", width: "68%", orderable: false },
        {
            data: "AlertInd",
            width: "5%",
            orderable: false,
            render: function (data, type, row, meta) {
                if (row.AlertInd === "1") {
                    return '<input id="chkAlert' + meta.row + '" type="checkbox" checked="checked" name="alertInd" />';
                }
                return '<input...