JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://codio.io/gpublio/GAT-HTML5/js/cytoscape.js"></script>
<script src="https://codio.io/gpublio/GAT-HTML5/js/jquery.cytoscape-edgehandles.js"></script>
<script src="https://codio.io/gpublio/GAT-HTML5/js/ace.js"></script>
<link rel="stylesheet" href="https://codio.io/gpublio/GAT-HTML5/css/smoothness/jquery-ui.css">
<body>
    <div id="toolbar" class="ui-widget-header ui-corner-all">
        <form>
            <div id="radio" class="ui-buttonset">
                <input type="radio" id="btnSelect" name="radio" checked="checked" class="ui-helper-hidden-accessible">
                <label for="btnSelect" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" role="button" aria-disabled="false" aria-pressed="true"><span class="ui-button-text">Move</span>

                </label>
                <input type="radio" id="btnAddNode" name="radio" class="ui-helper-hidden-accessible">
                <label for="btnAddNode" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Add Node</span>

                </label>
                <input type="radio" id="btnAddEdge" name="radio" class="ui-helper-hidden-accessible">
                <label for="btnAddEdge" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Add Edge</span>

                </label>
                <input type="checkbox" id="btnJson" name="radio" class="ui-helper-hidden-accessible">
                <label for="btnJson" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">JSON</span>

                </label>
            </div>
        </form>
    </div>
    <div id="cy"></div>
    <div id="json-edit">
        <textarea id="json"...

CSS

html {
            height: 95%;
        }
        body {
            font-family: Verdana, Arial, Times New Roman;
            font-size:11px;
            height: 100%;
        }
        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #toolbar {
            padding: 4px;
            width: 100%;
            text-align: center;
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
        #cy {
            height: 100%;
            width: 100%;
            float: left;
            position: relative;
            top: 10px;
            left: 0px;
            border: 1px solid #aaa;
            border-radius:5px;
            -webkit-border-radius:5px;
            padding: 0px;
            display: block;
            z-index: 1;
        }
        #json-edit {
            height: 100%;
            width: 100%;
            float: left;
            position: relative;
            top: 10px;
            left: 0px;
            border: 1px solid #aaa;
            border-radius:5px;
            -webkit-border-radius:5px;
            padding: 0px;
            z-index: 1;
        }
        #json {
            height: 100%;
            width: 100%;
            float: auto;
            position: relative;
            top: 0px;
            left: 0px;
            padding: 10px;
            z-index: -1;
            overflow: auto;
        }
        input, textarea {
            border: 1px solid #aaa;
            border-radius:5px;
            -webkit-border-radius:5px;
            padding: 5px;
            z-index: 1;
        }
        .ui-dialog .ui-dialog-title .ui-icon {
            float: left;
            margin-right: 4px;
        }
        .ui-dialog, .ui-dialog .ui-dialog-content {
            padding: 10px;
            overflow: hidden;
           ...

JavaScript

$(document).ready(function () {
    $("#radio").buttonset();
    $("#radio").find("label").unbind("mouseup");
    $("#btnSelect").button("option", "icons", {
        primary: 'ui-icon-arrow-4'
    });
    $("#btnAddNode").button("option", "icons", {
        primary: 'ui-icon-plusthick'
    });
    $("#btnAddEdge").button("option", "icons", {
        primary: 'ui-icon-arrow-1-e'
    });
    $("#btnClear").button("option", "icons", {
        primary: 'ui-icon-trash'
    });
    $("#btnJson").button("option", "icons", {
        primary: 'ui-icon-info'
    });
    $("#json-edit").hide();
    $("#cy").show();
    boolCy = true;
    $("#btnJson").change(function () {
        if (boolCy) {
            $("#cy").hide();
            boolCy = false;
            jsonCode += JSON.stringify(cy.json().elements, undefined, 2);
            $("#json").html(jsonCode);
            $("#json-edit").show();
        } else {
            $("#json-edit").hide();
            if (jsonCode != $("#json").val()) {
                cy.remove(cy.elements());
                cy.add($("#json").val());
                cy.reset();
            }
            $("#cy").show();
            jsonCode = "";
            boolCy = true;
        }
    })
});
var $cy = $("#cy"),
    boolCy = false,
    jsonCode = "";

$cy.cytoscapeEdgehandles({
    lineType: "straight",
    preview: true,
    handleSize: 12,
    handleColor: "orange",
    edgeType: function () {
        return "flat";
    },
    nodeParams: function () {
        return {
            classes: "intermediate"
        };
    }
});
$('#btnClear').click(function () {
    $("#dialog-clear").dialog("open");
    $('#cy').cytoscapeEdgehandles('disable');
});
$('#btnSelect').click(function () {
    $('#cy').cytoscapeEdgehandles('disable');
});
$('#btnAddNode').click(function () {
    $('#cy').cytoscapeEdgehandles('disable');
});
$('#btnAddEdge').click(function () {
    $('#cy').cytoscapeEdgehandles('enable');
});
$cy.cytoscape({
    showOverlay: false,
   ...