JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name='Author' content='Matt Seng' />
        <meta name="Description" content="IGP" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
    </head>
    
    <body>

        <div id="menuDiv">
            <div id="menuCtrl">
                <div id="menuCtrlWrapper" class="menuWrapper">
                    <div id='menuCtrlFormDiv'>
                        <div id="menuCtrlForm1" class="menuForm">
                            Tab 1 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                        <div id="menuCtrlForm2" class="menuForm hidden">
                            Tab 2 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                    </div>
                    <div id="menuCtrlTabs" class="menuTabs">
                        <div id="menuCtrlTabShow" class="clickable...

CSS

/* removes the top and left whitespace */
* { margin:0; padding:0; }

/* ensure full screen */
html, body {
    width:100%;
    height:100%;
    font-family: "Courier New", Courier, monospace;
    font-size: 95%;
}

/* remove the scrollbars */
canvas {
    display:block;
}

#menuCtrl {
    position: absolute;
    margin: 5px;
}

#menuInfo {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 5px;
}

.menuWrapper {
}

.menuForm {
    float: left;
    margin-top: 22px;
    padding: 5px;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    border-top-left-radius: 0;
    box-shadow: 3px 3px 5px #333;
}

.menuForm table {
    padding-top: 3px;
}
.menuForm td, th {
    white-space: nowrap;
}
.menuForm th {
    text-align: left;
}

.menuTabs {
    position: absolute;
    white-space: nowrap;
    top: 0;
}

.menuTabs div.tab {
    float: left;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0 5px 0 5px;
    text-align: center;
    background-color: white;
    border: 2px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.menuTabs div.secondary {
    border-left: 0px;
}
.menuTabs div.active {
    opacity: 1;
    border-bottom: 2px solid white;
}
.menuTabs div.active.showHide {
    border-bottom: 2px solid black;
}
.menuTabs div.inActive {
    opacity: .75;
    border-bottom: 2px solid black;
}

.clickable {
    cursor: pointer;
}
.visible {
    text-decoration: underline;
    text-decoration-color: black;
}
.invisible {
    text-decoration: line-through;
    text-decoration-color: red;
}
.hidden {
    display: none;
}

JavaScript

function tab(id) {
        if(id == 'menuCtrlTab1') {
            toggle('menuCtrlTab1');
            toggle('menuCtrlTab2');
            hide('menuCtrlForm2');
            show('menuCtrlForm1');
        }
        else if(id == 'menuCtrlTab2') {
            toggle('menuCtrlTab1');
            toggle('menuCtrlTab2');
            hide('menuCtrlForm1');
            show('menuCtrlForm2');
        }
        else if(id == 'menuCtrlTabHide') {
            hide('menuCtrlTab1');
            hide('menuCtrlTab2');
            hide('menuCtrlFormDiv');
            hide('menuCtrlTabHide');
            show('menuCtrlTabShow');
        }
        else if(id == 'menuCtrlTabShow') {
            show('menuCtrlTab1');
            show('menuCtrlTab2');
            show('menuCtrlFormDiv');
            hide('menuCtrlTabShow');
            show('menuCtrlTabHide');
        }
    
        else if(id == 'menuInfoTab1') {
            toggle('menuInfoTab1');
            toggle('menuInfoTab2');
            hide('menuInfoForm2');
            show('menuInfoForm1');
        }
        else if(id == 'menuInfoTab2') {
            toggle('menuInfoTab1');
            toggle('menuInfoTab2');
            hide('menuInfoForm1');
            show('menuInfoForm2');
        }
        else if(id == 'menuInfoTabHide') {
            hide('menuInfoTab1');
            hide('menuInfoTab2');
            hide('menuInfoFormDiv');
            hide('menuInfoTabHide');
            show('menuInfoTabShow');
        }
        else if(id == 'menuInfoTabShow') {
            show('menuInfoTab1');
            show('menuInfoTab2');
            show('menuInfoFormDiv');
            hide('menuInfoTabShow');
            show('menuInfoTabHide');
        }
        else {
        
        }
}
 
function toggle(id) {
    if(activated(id)) {
        deactivate(id);
    }
    else {
        activate(id);
    }
}

function hide(id) {
    docAddClass(id, 'hidden');
}
function show(id) {
    docRemoveClass(id, 'hidden');
}

function...