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        = "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>
    
    
    
    <!--
    
    onclick = "make_obj(jan_events)"
    a. this pass the HTML DOM to the function
    
    onclick = "make_obj('jan_events')"
    a. this passes the string data "jan_events" to the function
    -->
    <button 
    id      = "nEventB"
    onclick = "make_obj('jan_events')"
    > 
    Jan
    </button>


    <button 
    id      = "nEventB"
    onclick = "make_obj('feb_events')"
    > 
    Feb
    </button>


    <button 
    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, Tahoma,...

JavaScript

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;
 

       

        
        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
        {
            constructor( mId, eDay, eMsg, uPri, hPri )
            {
                // -- eColor ==> event color
                this.eColor = this.get_cc( uPri, hPri );
                this.msg    = eMsg;
                this.day    = eDay;
                this.tabId  = mId;
                
                this.eTitle  = " ";
               ...