JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>Search </title>
    <style type="text/css">
        #wrapper1
        {
            min-width: 750px;
            width: 80%;
            text-align: left;
        }
        
        .resultContainerDiv
        {
            width: 630px;
            float: left;
            display: block;
            margin: 30px 0 0 0;
            padding: 0 0 0 0px;
        }
        
        .gridTableBorder
        {
            height: 315px;
            overflow: scroll;
            font: normal 9pt Arial;
            padding: 0px 0px 0px 0px;
            margin: 0 0 0 0px;
            border: 1px solid #fcda55;
        }
        
        .resultGridTable th
        {
            background-color: #A7A7A6;
            color: #ffffff;
            padding: 2px 5px 2px 5px;
            font: bold 9pt Arial;
        }
    </style>
</head>
<body>
    <div id="wrapper1">
        <div id="resultContainer" class="resultContainerDiv">
            <div id="gridDiv" class="gridTableBorder">
                <div>
                    <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTaxAssociates"
                        style="border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th scope="col">
                                    <a>Fist Name</a>
                                </th>
                                <th scope="col">
                                    <a>Middle Name</a>
                                </th>
                                <th scope="col">
                                    <a>Last Name</a>
                                </th>
                                <th scope="col">
                                    <a>City</a>
                               ...

JavaScript

$(document).ready(function () {
 
 
            $('#gridDiv').css('width', '630px');
 
 
            //Set width of table cells
            var numberOfColumns = 7;
            $('.resultGridTable th, .resultGridTable td').each(function (i) {
 
 
                $(this).css('background-color', (['Purple', 'Orange', 'Purple', 'Orange', 'Purple', 'Orange', 'Purple'][i % 7]));
 
                if (i % numberOfColumns == 0) {
                    $(this).css('width', '15%');
                }
 
                if (i % numberOfColumns == 1) {
                    $(this).css('width', '15%');
                }
 
                if (i % numberOfColumns == 2) {
                    $(this).css('width', '15%');
                }
 
                if (i % numberOfColumns == 3) {
                    $(this).css('width', '15%');
                }
                if (i % numberOfColumns == 4) {
                    $(this).css('width', '10%');
                }
                if (i % numberOfColumns == 5) {
                    $(this).css('width', '15%');
                }
 
                if (i % numberOfColumns == 6) {
                    $(this).css('width', '10%');
                }
 
 
            }
    );
 
 
        }
);