JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html
id = "htmlTag"
>
<head>
   
    
    
</head>

<body
id = "bTag"
onload = "init_array()"
>
<!--<body
id = "bTag"
>
-->
 

    <div
    id = "hImg"
    >
    <p id="p2"> Calendar App With Priority Detection </p>
    </div>
  

    <div
    id = "options"
    >   
        <ul>
        
            <li>
                <input type="radio" id="uPri" name="pLevel" value="urgent">
                <label for="urgentCB"> Urgent </label>
            </li>



            <li>
                <input type="radio" id="hPri" name="pLevel" value="high">
                <label for="highCB"> High </label>
            </li>



            <li>
                <button id = "wThm" onclick = "thm_sel(0)"> Winter </button>
            </li>   
            
            
            
            <li>
            <button id = "sThm" onclick = "thm_sel(1)">Summer </button> 
            </li>
        </ul>
    </div>
    
    
    <br/><br/>
    
    
    <input 
    id        = "nEDay"
    value     = "1" 
    minlength = "2" 
    maxlength = "2"
    name      = "nEDay"
    />
    


 
    
    
    
    
    
    <input 
    id        = "nEInput"
    value     = "testing eMsg" 
    minlength = "20" 
    maxlength = "100"
    name      = "nEInput"
    />
    
    <br/><br/>
    
     
    
    
    <br/><br/>
    <div 
    id    = "navDiv"
    >
        <table
        id    = "nTable"
        > 
            <tr>
                <th
                id      = "t0"
                onclick = "tabSel( 0 )"
                >
                    Urgent
                </th>
                
                
                <th
                id      = "t1"
                onclick = "tabSel( 1 )"
                >
                    High
                </th>     
                
                
                <th
                id      = "t2"
                onclick = "tabSel( 2 )"
                >
                    Jan <span id = "janECount"> </span>
             ...

CSS

html
    {
        background-color: #ffffff;   
        background-image: url( "https://vuongducnguyen.com/images/wLand.png" );
    
    }
    
    body
    {
        position        : relative;
        top             : 10px;
        
        padding         : 5px 10px 10px 10px;
        margin          : auto;
        
        width           : 85%;
        height          : 900px;
        
        background-color: #ffffff;   
        border          : 2px solid #00BFFF;
        
        color           : #505050;
        
        
    }
    
    div#options
    {
        padding    : 20px 0px 20px 0px;
        /*margin     : 0px 0px 0px 0px; */
        margin     : auto;
        
        width      : 89%;
        
        border     : 5px double #ffffff;
        background-color: #909090;
        background-image: url("https://vuongducnguyen.com/images/rain.jpg");
        background-position: center;
        
    }
    
    div#options ul
    {
        padding    : 0px 0px 0px 0px;
        margin     : 0px 0px 0px 00px;
        

    
    }


    div#options ul li
    {
        padding    : 0px 0px 0px 0px;
        margin     : 0px 0px 0px 00px;
        
        display    : inline;
    
    }
    
    
    div#options button
    {
        padding    : 0px 5px 0px 5px;
        margin     : 0px 0px 0px 10px;
            
            
    }
    
    div#options label
    {
        padding    : 0px 0px 0px 0px;
        margin     : 0px 0px 0px 00px;
            
        color      : #ffffff;    
            
    }
    
    
    
  #hImg
    {
        padding         : 5px 10px 10px 10px;
        margin          : 0px 0px 0px 0px;
        border        : 5px double #ffffff;         


    
    }
    
    p#p2
    {
        padding         : 40px 0px 40px 0px;
        margin          : 10px 10px 10px 10px;
        

        font-weight   : bold;
        font-family   : Arial, Tahoma, Serif;
        border        : 5px double #ffffff; 
        text-align    :...

JavaScript

var eventArr = [];
        var tabArr   = [];
        var eArr     = [];
        var eCount   = 0;
        var ePerMonthArr = [];
        var thmArr   = [];
        var currTicket = 0;
        var popDOM     = "pUpBanner";
        var popObj     = "";
        var pDOMW      = 0;
        var pDOMH      = 0; 
        var eTdCHeight = 0;
        

        
        class Theme
        {
            constructor( htmlImg, formImg, borderC, hImg )
            {
                
                this.htmlBgImg      = htmlImg;
                this.formBgImg      = formImg;
                this.borderColor    = borderC;
                this.hBgImg         = hImg;
            
                alert( this.htmlBgImg + ", " + this.formBgImg + ", " + this.borderColor );
            }
            
            set_as_theme()
            {
 
                document.getElementById( "options" ).style.backgroundImage = this.formBgImg;
                
                document.getElementById( "htmlTag" ).style.backgroundImage = this.htmlBgImg;

                document.getElementById( "bTag" ).style.border = this.borderColor;
                
                document.getElementById( "p2" ).style.backgroundImage = this.hBgImg;
                
                
                alert( "inside set_as_theme()" );
                
            }
        
        }
 
        
        class EventProf
        {
 
            
            make_clone( myTicket )
            {

                this.eTicket = myTicket;
                
                var baseObj = document.getElementById( this.tabId + "_" + this.day  );

                alert( "baseObj id: " + baseObj.getAttribute( "id" ) );
                // -- make a clone of the <div id = "eb_">
                var clObj   = baseObj.cloneNode(true);

                // -- set the attribute using setAttribute( )
                clObj.setAttribute( "id", this.tabId + "_" + this.day + "_" + this.eTicket );
                clObj.innerHTML =...