JSFiddle - React, Tailwind, and code Playground

by urashita

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css">

  
    <div class="outer">
      
        <div class="row">
            <div class="col-sm-6 sp resize tab-pane" id="jsPane">

                <div class="pane-label">javascript</div>
            </div>
            <div class="col-sm-6 sp tab-pane" id="cssPane">
                
                <div class="pane-label">css</div>
            </div>
         </div>
  </div><!--/outer-->

CSS

html,body {
	height:100%;
}

body {
  overflow: hidden;
}


.row {
    margin-left:0;
    margin-right:0;
}

.row .sp {
   height:150px;
   min-height:45px;
   padding-right:0;
   padding-left: 0;
   background-color: #222;
   border-bottom:4px solid transparent;
}

.row .sp.toolbar {
	padding-bottom:30px;
    height:240px;
}

.last {
	height:100%;
}

.outer {
  border:0px #000 solid;
  height:100%;
}

.preview {
  overflow-y: auto;
  overflow-x: hidden;
  /*height:100%;
  position: relative;*/
}

.resize {
   /*border-right:3px #eee solid;*/
}


input[type=radio], input[type=checkbox] {
	vertical-align:middle;
    margin-top:-1px;
}
.pane-panel .row > [class*='col-']{
	color:#000;
    padding:4px;
    font-size:12px;
}
.pane-panel .row > [class*='col-']:nth-child(1) {
    background-color: rgba(240,240,240,.4);
}
.pane-panel .row > [class*='col-']:nth-child(2) {
    background-color: rgba(240,240,240,.5);
}
.pane-panel .row > [class*='col-']:nth-child(3) {
    background-color: rgba(240,240,240,.6);
}
.pane-panel .row > [class*='col-']:nth-child(4) {
    background-color: rgba(240,240,240,.7);
}
.pane-panel .row > [class*='col-']:nth-child(5) {
    background-color: rgba(240,240,240,.8);
}
    


.wrapper {
	width:100%;
    margin-top:44px;
    min-height: 100%;
	height: 100%;
    overflow:hidden;
}

.inner {
	overflow-y:auto;
    overflow-x:hidden;
    /*height:100%;*/
    min-height:100%;
}


.ui-resizable { }
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
/*.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }*/
.ui-resizable-e {
	background-color: #424242;
	background: linear-gradient(#405050,#002B36);
	border-right: 1px solid #111;
	border-left: 1px solid #111;
	box-shadow: inset 0 1px 0 #6e6e6e,0 2px 2px rgba(0,0,0,0.4);
    width:10px;
    z-index: 88 !important;
}
.ui-resizable-e:after {
  content: "-";
  display: block;
  position: absolute;
  top: calc(50% - 16px);
  left: 0;
 ...

JavaScript

$(function() {

$('#myTab a').click(function (e) {
	 e.preventDefault();
	 $(this).tab('show');
});

var viewportWidth = $(window).width();
$('#monitor').html(viewportWidth);

$(window).bind("resize", function(event){
  	if (this == event.target) {
	   $('.sp').removeAttr('style');
    }
    var viewportWidth = $(window).width();
    $('#monitor').html(viewportWidth);
});
  
$('.resize').resizable({
    handles: 's,e',  
	minWidth:150,
  	maxWidth:1200,
  	resize:function(event,ui){
    	var x=ui.element.outerWidth();
    	var y=ui.element.outerHeight();
        var par=$(this).parent().width();
    	var ele=ui.element;
     	var factor = par-x;
      
        //console.log("floated?"+par+":"+x);
      
        if (x==par) {
            jsEditor.resize();
            cssEditor.resize();
            htmEditor.resize();
            return;
	    }
      	
      	$.each(ele.siblings(),function(idx,item){
          
        	ele.siblings().eq(idx).css('height',y+'px');
          	ele.siblings().eq(idx).css('width',(factor)+'px');
          
      	});
      
        if (x>=(par-100)) {
      		$(".resize").resizable("option","maxWidth",ui.size.width);
            return;
	    }
      
        jsEditor.resize();
        cssEditor.resize();
        htmEditor.resize();
    }
});

$('.sp:not(.resize)').resizable({
    handles: 's',
    start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      },
  	resize:function(event,ui){
    	
      	var x=ui.element.outerWidth();
    	var y=ui.element.outerHeight();
        var par=$(this).parent().width();
    	var ele=ui.element;
      
        if (x==par) {
            jsEditor.resize();
            cssEditor.resize();
            htmEditor.resize();
            return;
	    }
     	
      	$.each(ele.siblings(),function(idx,item){
        	ele.siblings().eq(idx).css('height',y+'px');
      	});
      
       ...