JSFiddle - React, Tailwind, and code Playground

by renfley

HTML

<div id="code">
    <div id="content">
        <fieldset id="LeftPanel">
            <div id="div_A" data-panel_type="html" class="window top">	<span class="window_label" style="opacity: 0.8;">HTML</span>

                <textarea id="sr" style="height: 100%; width: 100%;border: none; resize: none; box-shadow:#E4E4E4 0 1px 3px inset; ">
                    <p>test</p>
                </textarea>
            </div>
            <div id="div_left" class="handler_horizontal"></div>
            <div id="div_B" class="window bottom"><span class="window_label" style="opacity: 0.8;">JavaScript</span>

                <textarea style="height: 100%; width: 100%;border: none; resize: none; box-shadow:#E4E4E4 0 1px 3px inset; "></textarea>
            </div>
        </fieldset>
        <div id="div_vertical" class="handler_vertical"></div>
        <fieldset id="RightPanel">
            <div id="div_C" class="window top"><span class="window_label" style="opacity: 0.8;">CSS</span>

                <textarea style="height: 100%; width: 100%;border: none; resize: none; box-shadow:#E4E4E4 0 1px 3px inset; "></textarea>
            </div>
            <div id="div_right" class="handler_horizontal"></div>
            <div id="div_D" class="window bottom"><span class="window_label" style="opacity: 0.8;">Preview</span>

                <!--<iframe src="#sr" id="test" style="width: 100%;"></iframe>-->
            </div>
        </fieldset>
    </div>

CSS

#code{
    height: 500px;
    width: 700px;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 10px;
    background: none repeat scroll 0 0 #EFEFEF;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
}
#LeftPanel {
    width: 50%;
    float: left;
    position:relative;
}
#RightPanel {
    width: 50%;
    float: right;
    position:relative;
}
.handler_vertical {
    cursor: col-resize;
    width: 9px;
    float: left;
}
.handler_horizontal {
    cursor: row-resize;
    height: 9px;
    width: 100%;
    float: left;
}
.window {
    border: 1px solid #ADADAD;
    width: 100%;
    float: left;
}
.top {
    height: 25%;
    background: white;
}
.bottom {
    height: 75%;
    background: white;
    position:relative;
}
/*Labels inside each frame*/
 .window_label {
    background-color:#FFFFFF;
    background-position:initial initial;
    background-repeat:initial initial;
    border:1px solid #F1F1F1;
    border-bottom-left-radius:1px;
    border-bottom-right-radius:1px;
    border-top-left-radius:1px;
    border-top-right-radius:1px;
    color:#777777;
    display:inline-block;
    font-size:12px;
    height:22px;
    line-height:22px;
    padding:0 6px;
    text-align:center;
    right: 5px;
    top: 5px;
    position: absolute;
}

JavaScript

$(function () {
    window.onresize = resize;
    resize();
});



function resize() {
    var h1 = $("#code").height();
    $(".bottom").css("height", h1 + "px");
    
    var divHight = 20 + $("#div_left").height(); //20=body padding:10px
    $("#content").css({
        "min-height": h1 - divHight + "px"
    });
    $("#div_vertical").css({
        "height": h1 - divHight + "px"
    });
    $("#LeftPanel").css({
        "height": h1 - divHight + "px"
    });
    $("#RightPanel").css({
        "height": h1 - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

jQuery.resizable = function (resizerID, vOrH) {
    jQuery('#' + resizerID).bind("mousedown", function (e) {
        var start = e.pageY;
        if (vOrH == 'v') start = e.pageX;
        jQuery('body').bind("mouseup", function () {
            jQuery('body').unbind("mousemove");
            jQuery('body').unbind("mouseup");

        });
        jQuery('body').bind("mousemove", function (e) {
            var end = e.pageY;
            if (vOrH == 'v') end = e.pageX;
            if (vOrH == 'h1') {
                jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height() + (end - start));
                jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height() - (end - start));
            } else {
                jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width() + (end - start));
                jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width() - (end - start));
            }
            start = end;
        });
    });
}

jQuery.resizable('div_vertical', "v");
jQuery.resizable('div_right', "h1");
jQuery.resizable('div_left', "h1");