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>
                <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/>
    


    <select id="priMenu">

        <option id = "pri_0" value="u" selected > Urgent   </option>
        <option id = "pri_1" value="p"> High     </option>
        <option id = "pri_2" value="n"> Normal   </option>

    </select>

 




    <select id="mMenu">
      <option id = "m_1" value="jan_events" selected> Jan   </option>
      <option id = "m_2" value="feb_events"> Feb   </option>
      <option id = "m_3" value="mar_events"> Mar   </option>
       
    </select>



    <input 
    id        = "nETitle"
    value     = "testing title" 
    minlength = "20" 
    maxlength = "50"
    name      = "nETitle"
    />
    
    
    
    
    
    <input 
    id        = "nEInput"
    value     = "testing eMsg" 
    minlength = "20" 
    maxlength = "100"
    name      = "nEInput"
    />
    
    <br/><br/>
    
    
    
    <div 
    id = "pUpBanner"
    >
    hi
    </div>
    
     

    <button 
    id      = "nEventB"
    onclick = "make_obj()"
    > 
    Add New Event
    </button>



    <button 
    id      = "modEB"
    onclick = "mod_eObj()"
    > 
    Mod
    </button>


    
    <br/><br/>
    <div 
    id    = "navDiv"
    >
        <table
        id    = "nTable"
        > 
            <tr>

                <th
                id      = "t0"
                onclick = "tabSel( 0 )"
                >
                    Jan <span id...

CSS

html
    {
        background-color: #ffffff;   
        /*background-image: url( "https://vuongducnguyen.com/images/wLand.png" );*/
        background-attachment: fixed;
        background-size: 100% 100%;
    
    }
    
    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,...

JavaScript

/* =====================================================================
    The private attribute this.eTicket is the position of the object in the global array eArr. 
    The private attribute this.eTicket indicates an object's creation number. For example, if
    the this.eTicket is 5, that means that the object was the 5th object created. 



    */
        var eventArr = [];
        var tabArr   = [];
        var eArr     = [];
        var eCount   = 0;
        var ePerMonthArr  = [];
        var urPerMonthArr = [];
        var hiPerMonthArr = [];
        var tabColorArr   = [];
        var thmArr     = [];
        var currTicket = 0;
        var popDOM     = "pUpBanner";
        var popObj     = "";
        var pDOMW      = 0;
        var pDOMH      = 0; 
        var eTdCHeight = 0;
        var tabCode    = 0;
        var eCLevel    = [];
        var oLevel     = 2;
        var pLevel     = 4;
        var rLevel     = 6;
        var chosenTicket = 0;
        var janIT      = [];
        var febIT      = [];
        var marIT      = [];
        var tempArr    = [];

       

        
        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;
                
   ...