JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajaxorg.github.com/ace/build/src/ace.js"></script>
<script src="http://ajaxorg.github.com/ace/build/src/mode-javascript.js"></script>
<script src="http://ajaxorg.github.com/ace/build/src/mode-css.js"></script>
<script src="http://ajaxorg.github.com/ace/build/src/mode-html.js"></script>
<script src="http://ajaxorg.github.com/ace/build/src/theme-twilight.js"></script>
<link rel="stylesheet" href="https://github.com/paulirish/html5-boilerplate/raw/master/css/style.css">
<div class="code-editor">
    <div class="code-editor-bits clearfix">
        <a id="html" href="#html">Html</a>
        <div class="code-editor-input">
            <div class="code-editor-input-inner">
                <textarea class="editor" rel="html">
<a href="http://www.google.com">Google</a>
</textarea>
            </div>
        </div>        
        <a id="css" href="#css">Css</a>
        <div class="code-editor-input">
            <div class="code-editor-input-inner">
                <textarea class="editor" rel="css">a {
    color:Red;
}</textarea>
            </div>
        </div>
                    
        <a id="js" href="#js">Javascript</a>
        <div class="code-editor-input">
            <div class="code-editor-input-inner">
                <textarea class="editor" rel="js">function random(){
    return 4;
}</textarea>
            </div>
        </div>
    </div>
</div>

CSS

body{
 overflow:hidden;   
}

.code-editor{
    position:relative;
    background:#222;
    -webkit-border-radius:3px;
    padding:6px 2px;
}
    .code-editor-bits
    {
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
    }
            .code-editor-bits a
            {
                display:block;
                float:left;
                padding:2px 5px;
                margin:0 1px 0 0;
                background:transparent;
                text-decoration:none;
                color:#fff;
                -webkit-border-radius:3px 3px 0 0;
            }
            .code-editor-bits a:hover
            {
                background:#555;
            }
            .code-editor-bits a:target
            {
                background:#aaa;
                color:#000;
                margin-bottom:400px;
            }
            .code-editor-bits a:target + .code-editor-input
            {
                border-top:solid #aaa 4px;
                display:block;
            }
    .code-editor-input
    {
        display:none;
        list-style:none;
        position:absolute;
        width:100%;
        bottom:-4px;
        left:0;
    }
        .code-editor-input-inner
        {
            position:relative;
            width:100%;
            height:400px;
        }
        .code-editor-input .editor
        {
            height:100%;
            display:block;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            margin:0;
            padding:0;
        }
            .code-editor-input .ace_print_margin
            {
                display:none;
            }

JavaScript

// create a guid
    var guid = function () {
        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        }).toUpperCase();
    };

$(".editor").each(function () {
        var id = this.id,
            editor,
            mode,
            me = this,
            self = $(this),
            oldSelf = self,
            rel = oldSelf.attr("rel"),
            html = oldSelf.html();
        switch (rel) {
            case "js":
                mode = require("ace/mode/javascript").Mode;
                break;
            case "html":
                mode = require("ace/mode/html").Mode;
                break;
            case "css":
                mode = require("ace/mode/css").Mode;
                break;
            default:
                return true;
        }
        if (oldSelf.is("textarea")) {
            oldSelf.hide();
            self = $("<pre class='editor' rel='" + rel + "'></pre>").insertAfter(oldSelf);
            self.html(html);

            me = self[0];

        }


        id = me.id || (me.id = guid());
        editor = ace.edit(id);
        editor.setTheme("ace/theme/twilight");
return;
        var session = editor.getSession();
        session.setMode(new mode());
        session.on("change", function () {
            oldSelf.html(session.getValue());
        });
}).eq(0).each(function(){
    window.location.hash = $(this).attr("rel");
});