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

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;

       

        
        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 );
            }
            
            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);*/

                var clObj = document.createElement( "LI" );


                // -- set the attribute using setAttribute( )
                clObj.setAttribute( "id", this.tabId +...