JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <header>
            <h1>Title</h1>
            <h2>Subtitle</h2>
        </header>
        <section>
            <div id="canvascontainer">
                <canvas height="300" id="canvas" width="300"></canvas>
            </div>
            <div id="menu">
                <ul>
                    <li><a href="#" onclick="drawCircle()">Circle</a>
                    </li>
                    <li><a href="#" onclick="drawLine()">Line</a>
                    </li>
                    <li><a href="#" onclick="drawSquare()">Square</a>
                    </li>
                    <li><a href="#" onclick="drawTri()">Triangle</a>
                    </li>
                    <li><a href="#" onclick="drawCloud()">Cloud</a>
                    </li>
                    <li><a href="#" onclick="harvardLogo()">Harvard Logo</a>
                    </li>
                    <li><a href="#" onclick="clearCanvas()">Clear</a>
                    </li>
                </ul>
            </div>
        </section>
        <section>
            <div id="filecontainer">
                <label>Image File:</label>
                <br/>
                <input type="file" id="imageLoader" name="imageLoader" />
                <canvas id="imageCanvas"></canvas>
                <ul>
                    <li> <a href="#" onclick="inverseImg()">Alpha</a>
                    </li>
                    <li><a href="#" onclick="grayscaleImg()">Grayscale</a>
                    </li>
 
                </ul>
            </div>
        </section>
    </div>
    </div>
    <div id="command">
        <h2>Style the page!</h2>
        <ul>
            <li>Change H1 Font Size:
                <input type="range" id="h1fontsize" onchange="fontSize()" name="h1fontsize" min="10" max="32">
            </li>
            <li>Font Color: Darker
                <input type="range" id="fontcolor" onchange="fontColor()" name="fontcolor" min="01" max="255">Lighter
          ...

CSS

/*reset*/
    html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
        background: transparent;
    }
    article, aside, figure, footer, header, nav, section, details, summary {
        display: block;
    }
    /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
    /* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
    *, *:before, *:after {
        box-sizing: border-box;
    }
    /* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
    img, object, embed {
        max-width: 100%;
    }
    /* force a vertical scrollbar to prevent a jumpy page */
    html {
        overflow-y: scroll;
    }
    /* we use a lot of ULs that aren't bulleted.
    don't forget to restore the bullets within content. */
    ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content:'';
        content: none;
    }
    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    del {
        text-decoration: line-through;
    }
    abbr[title], dfn[title] {
        border-bottom: 1px dotted #000;
        cursor:...

JavaScript

//command stuff here
    var count = 0;
    var hcount = 0;
    $("a").hover(function() { //count hovers
        hcount++;
        $("#hover").text(hcount);
        analytics(count, hcount);
        return hcount;
    });
    $("a").click(function(event) { //count clicks
        event.preventDefault(); //remove link functionality
        count++;
        $("#click").text(count);
        analytics(count, hcount);
        return count;
 
    });
 
    function analytics(count, hcount) { //update ctr
        ctr = (count / hcount).toString();
        ctr = parseFloat(ctr).toFixed(2);
        $("#ctr").text("%" + ctr);
 
    }
 
    var $timer = $('#time'); //seconds counter
    var numSecs = 0;
 
    window.setInterval(function() {
        numSecs++;
        $timer.text(numSecs);
    }, 1000);
 
    $("#destroy").click(function() { // destroys page
        $('*').animate({
            width: ["toggle", "swing"],
            height: ["toggle", "swing"],
            opacity: "toggle"
        }, 3000, "linear", function() {
 
        });
    });
 
    function fontSize() { //control font size of h1
        var size = $("#h1fontsize").val();
        $("h1").css("font-size", size + "px");
 
    }
 
    function fontColor() { //text color for page
        var color = $("#fontcolor").val();
        var base = [color, color, color];
        var a = base.toString();
        $("a, #container").css("color", "rgb(" + a + ")");
    }
 
    $("#colors li").hover( //change section colors
 
        function() {
          var tar;
            if ($(this).hasClass("top")) {
                tar = $('section:eq(0)');
            } else {
                 tar = $('section:eq(1)');
            }
 
            var a = $(this).css("background-color");
 
            tar.css("background-color", a);
        },
        function() {
 
        }
    );
 
    //file stuff here
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage,...