JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="taskMaster.js"></script>
    <link rel="stylesheet" type="text/css" href="taskMaster.css" />
</head>
    <body>
        <div id="interface">
        </div>
    </body>
</html>

CSS

.menuMain
{
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 4px;
    cursor: default;
    border-style: solid;
    border-width:1px;
    border-color: #777777;
    width: 388px;
    background-color: #777777;
    text-decoration: bold;
    color: #cccccc;
}

.menuSub
{
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    cursor: default;
    border-style: solid;
    border-width:1px;
    border-color: #777777;
    width: 392px;
    background-color: #888888;
    text-decoration: bold;
    color: #dddddd;
}

.return
{
    padding-left: 2px;
    padding-right: 2px;
    float: right;
    border-style:solid;
    border-width:1px;
    border-color: #cccccc;
    background-color: #777777;
    text-decoration: bold;
    font-size: 10px;
    color: #cccccc;
}

.menuContent
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    cursor: default;
    width: 376px;
    padding-left: 16px;
    padding-right: 8px;
    border-style: solid;
    border-width:1px;
    border-color: #777777;
    background-color: #cccccc;
    color: #777777;
}

.description
{
    padding-left: 12px;
}

.completeTask
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    cursor: default;
    width: 384px;
    padding-left: 16px;
    border-style: solid;
    border-width:1px;
    border-color:  #339900;
    background-color: #ccff66;
    color: #339900;
}

.incompleteTask
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    cursor: default;
    width: 384px;
    padding-left: 16px;
    border-style: solid;
    border-width:1px;
    border-color: #990000;
    background-color: #ff6666;
    color: #990000;
}

.completeBox
{
    padding-left: 3px;
    padding-right: 3px;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
    border-style:solid;
    border-width:3px;
    border-color: #339900;
    background-color: #ccff66;
    text-decoration: bold;
    font-size: 10px;
...

JavaScript

$(document).ready(function() {


    $(MainMenu);

    //main menu

    function MainMenu() {
        var mainList = ["»New List", "»Show Lists", "»Delete Lists"];
        var onClick = [NewList, ListMenu, DeleteList];
        var mainMenu = new Menu("Main Menu", "menuMain", mainList, onClick, "a description");
        mainMenu.contentMenu();
    }

    //new list menu

    function NewList() {
        var mainList = ["»Create a New List"];
        var onClick = [];
        var newListMenu = new Menu("New List", "menuSub", mainList, onClick);
        newListMenu.contentMenu();
    }

    //display lists menu

    function ListMenu() {
        var mainList = ["example task"];
        var onClick = [];
        var currentListsMenu = new Menu("Lists", "menuSub", mainList, onClick, "description goes here");
        //currentListsMenu.contentMenu();
        currentListsMenu.taskMenu();
    }

    //delete list menu

    function DeleteList() {
        var mainList = [];
        var onClick = [];
        var deleteListsMenu = new Menu("Delete a List", "menuSub", mainList, onClick);
        deleteListsMenu.contentMenu();
    }


    //menu class

    function Menu(name, divClass, content, onclick, description) {
        var divId = name.replace(/\s+/g, "");

        $("#interface").html(null);

        //title
        formatDiv("interface", divId, divClass, name);

        //return
        if (divClass === "menuSub") {
            formatDiv(divId, divId + "return", "return", "^ Main Menu", MainMenu);
        }


        //display options
        this.contentMenu = function() {
            for (i = 0; i < content.length; i++) {
                var div = new formatDiv("interface", divId + i, "menuContent", content[i], onclick[i], description);
                div.addDescription();
            }
        }

        this.taskMenu = function() {
            var taskName = ["a task!"];
            var taskDescription = ["task description!"];
            var taskComplete =...