JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://methvin.com/splitter/splitter.js"></script>
<div class="widget">
    <div>left</div>
    <div class="right">
        <div>middle</div>
        <div class="mid">
            <div>right</div>
            <div>bottom</div>
        </div>
    </div>
</div>

CSS

.widget {
    border: 1px solid #333;
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: absolute;
}
.vsplitbar {
    width: 2px;
    background: #333;
}

.hsplitbar {
    height: 2px;
    background: #333;
}

CoffeeScript

$ ->
  $(".widget").resizable().splitter()
  $(".right").splitter type: "h"
  $(".mid").splitter type: "h"