JSFiddle - React, Tailwind, and code Playground

by Jean-Philippe Janecek

HTML

<link rel="stylesheet" href="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/css/bootstrap.min.css">
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/prettify.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<link rel="stylesheet" href="http://rextester.com/Scripts/codemirror3/lib/codemirror.css">
<script src="http://rextester.com/Scripts/codemirror3/lib/codemirror.js"></script>
<script src="http://rextester.com/Scripts/codemirror3/mode/clike/clike.js"></script>
<link rel="stylesheet" href="http://rextester.com/Scripts/codemirror3/theme/java.css">
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
<div id="rootwizard" class="tabbable tabs-left">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Flavor content</a>

        </li>
        <li><a href="#tab2" data-toggle="tab">Java Result</a>

        </li>
        <li><a href="#tab3" data-toggle="tab">Java Main</a>

        </li>
        <li><a href="#tab4" data-toggle="tab">Binary result</a>

        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1"> <a href="#" class="button" onclick="Run();">Run</a>

            <textarea class="editor" spellcheck="false" cols="1000" id="Flavor" name="Flavor" rows="10" style="width: 100%;resize:none;">class Test {
  int(6) header;
  int(3) magic;
}</textarea>
        </div>
        <div class="tab-pane" id="tab2"><a class="button" onclick="Clear();">Clear</a>

            <textarea class="editor" spellcheck="false" cols="1000" id="ResultFl" name="ResultFl" rows="10" style="width: 100%;resize:none;"></textarea>
        </div>
        <div class="tab-pane" id="tab3"><a href="#" class="button">Execute</a>

            <textarea class="editor" spellcheck="false"...

CSS

.com {
    color: #93a1a1;
}
.lit {
    color: #195f91;
}
.pun, .opn, .clo {
    color: #93a1a1;
}
.fun {
    color: #dc322f;
}
.str, .atv {
    color: #D14;
}
.kwd, .prettyprint .tag {
    color: #1e347b;
}
.typ, .atn, .dec, .var {
    color: teal;
}
.pln {
    color: #48484c;
}
.prettyprint {
    padding: 8px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
    -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
    box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
 ol.linenums {
    margin: 0 0 0 33px;
    /* IE indents via margin-left */
}
ol.linenums li {
    padding-left: 12px;
    color: #bebec5;
    line-height: 20px;
    text-shadow: 0 1px 0 #fff;
}
/* actions */
 #actions {
    height: 44px;
    font-size: 13px;
}
#actions ul.actionCont {
    float: left;
}
#actions ul.right {
    float: right;
}
#actions li.actionItem {
    float: left;
    position: relative;
    margin-right: 1px;
}
#actions li.actionItem .aiButton, #actions li.actionItem .aiButton span, #actions ul.dropdown li.actionItem a.aiButton {
    height: 44px;
}
#actions li.actionItem a.aiButton {
    display: block;
    outline: none;
    text-decoration: none;
    color: #fff;
    background: #4072b4;
    padding: 0 10px;
}
#actions li.actionItem.jobboard a.aiButton {
    background: none;
    font-size: .9em;
    font-weight: 800;
}
#actions li.actionItem a.aiButton span {
    line-height: 44px;
    margin-right: 6px !important;
    font-size: .85em;
}
#actions li.noIcon a.aiButton span {
    padding: 0 0 0 6px;
    margin-right: 0;
}
#actions li.actionItem #mobile.aiButton span {
    margin-right: 0;
}
#actions li.actionItem a.aiButton span.selected {
    color: #555;
    background: #fff;
}
#actions ul.dropdown .dropdownCont li {
    line-height: 26px;
}
#actions ul.dropdown .dcWrapper a {
   ...

JavaScript

var editor = '';

   	function Run() {
   	    Save();
   	    Build();
   	}

   	function Save() {
   	    // document.getElementById("Flavor").value
   	    $.post('http://127.0.0.1:8080/wsSaveFl', editor.getValue(),

   	    function (data) {
   	        $("#ResultFl").html(data);
   	    }, 'text');
   	}

   	function Build() {
   	    $.get('http://127.0.0.1:8080/wsGenFromFl',

   	    function (data) {
   	        $("#ResultFl").html(data);
   	    });
   	}

   	function Zip() {
   	    $.get('http://127.0.0.1:8080/wsZipFl',

   	    function (data) {

   	    });
   	}

   	function Clear() {
   	    $("#ResultFl").html('...');
   	}
   	$(document).ready(function () {
   	    $('#rootwizard').bootstrapWizard({
   	        'tabClass': 'nav nav-tabs'
   	    });
   	    editor = CodeMirror.fromTextArea(document.getElementById("Flavor"), {
   	        //matchBrackets : true,
   	        mode: "text/x-java",
   	        lineNumbers: true,
   	        styleActiveLine: true,
   	        indentUnit: 4,
   	        matchBrackets: true,
   	        theme: "ambiance",
   	    });
   	    GlobalEditor = editor;

   	    edResultFl = CodeMirror.fromTextArea(document.getElementById("ResultFl"), {
   	        //matchBrackets : true,
   	        mode: "text/x-java",
   	        lineNumbers: true,
   	        styleActiveLine: true,
   	        indentUnit: 4,
   	        matchBrackets: true,
   	        theme: "ambiance",
   	    });
   	    edResultEx = CodeMirror.fromTextArea(document.getElementById("ResultEx"), {
   	        //matchBrackets : true,
   	        mode: "text/x-java",
   	        lineNumbers: true,
   	        styleActiveLine: true,
   	        indentUnit: 4,
   	        matchBrackets: true,
   	        theme: "ambiance",
   	    });
   	    edResultBin = CodeMirror.fromTextArea(document.getElementById("ResultBin"), {
   	        //matchBrackets : true,
   	        mode: "text/x-java",
   	        lineNumbers: true,
   	        styleActiveLine: true,
  ...