JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <body >
        <div class="container-fluid">
            <div class="row">
                <button id="clickme">click</button>
            </div>
            <div class="row" id="editor">
                <div class="col-sm-12" id="ui.simplesample"></div>
            </div>
        </div>
    </body>

CSS

html, body, .main,.container-fluid { height: 100%}
            #editor
            {
                height: 50%;
                display: table-row;
            }
            .container-fluid
            {
                display:table;
                width: 100%;
                margin-top: -50px;
                padding-top: 50px;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            body {
                margin: 0px;
                padding: 0px;
            }

JavaScript

;
$(function () {
    var width = document.getElementById('ui.simplesample').offsetWidth - 30;
    var height = window.innerHeight;
    var lines = 50;

    function drawLabels(layer, stage) {
        for (var i = 0; i < lines; i++) {
            var line = new Konva.Line({
                points: [10, 10, 10, 20, 75, 20],
                stroke: 'grey',
                strokeWidth: 1

            });

            var label = new Konva.Text({
                x: 13,
                y: 4,
                text: "Layer Lorem Ipsum",
                fontSize: 14
            });

            line.move({y: 20 * i});
            label.move({y: 20 * i});
            layer.add(line);
            layer.add(label);
        }
    }

    function drawAxis(layer, stage) {
        var l = layer.getWidth() - 1;
        console.log(l);
        console.log(stage.getWidth());
        for (var i = 0; i < lines; i++) {
            var axisLine = new Konva.Line({
                points: [0, 10, l, 10],
                stroke: 'grey',
                strokeWidth: .5
            });
            axisLine.move({y: 20 * i});
            var start = new Konva.Line({
                points: [0, 5, 0, 15],
                stroke: 'grey',
                strokeWidth: .5
            });
            var end = new Konva.Line({
                points: [0, l - 150, 0, l - 150],
                stroke: 'grey',
                strokeWidth: .5
            });

            var effectGroup = new Konva.Group({
                draggable: false
            });

            var effectbox = new Konva.Rect({
                x: 0,
                y: 0,
                height: 20,
                width: 150,
                stroke: 'black',
                strokeWidth: 1,
                fill: 'grey',
                opacity: .5,
                name: 'effectbox',
                draggable: true,
                dragBoundFunc: function (pos) {
                    var group = this.getParent();
                   ...