JSFiddle - React, Tailwind, and code Playground

by robtown

HTML

<script src="http://www.robtown.com/road/js/synchdivscroll.js"></script>
<script src="http://www.robtown.com/road/js/getCulverts.js"></script>
<script src="http://www.robtown.com/road/js/writeMessages.js"></script>
<script src="http://www.robtown.com/road/images/canvasBG1.jpg"></script>
<script src="http://www.robtown.com/road/js/addMapFeatures.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.2.0.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
    <script type="text/javascript" src="js/getCulverts.js"></script>
    <script type="text/javascript" src="js/addMapFeatures.js"></script>
     <script type="text/javascript" src="js/writeMessages.js"></script>

<script>
//window.addEventListener('resize',resize,false);

 window.onload =  function() {
          var windowWidth = 2000;
          
        var stage = new Kinetic.Stage({
          container: "canvas1",
          
          width: windowWidth,
          height: 300
        });
           var stage2 = new Kinetic.Stage({
          container: "canvas2",          
          width: windowWidth,
          height: 300
        });
        var dragBarLayer = new Kinetic.Layer(); 
        var dragBarLayer2 = new Kinetic.Layer(); 
        var culvertLayer = new Kinetic.Layer();
        var streetLayer = new Kinetic.Layer();
        var boxLayer = new Kinetic.Layer();
        var messageLayer = new Kinetic.Layer();
        var rectX = stage.getWidth() / 2 - 50;
        var rectY = stage.getHeight() / 2 - 25;

         var street = new Kinetic.Rect({
          x: 0,
          y: 90,
          width: windowWidth,
          height: 30,
          fill: "#999",
          
          draggable: false
        });
        var box = new Kinetic.Rect({
      ...

CSS

@charset "utf-8";
html body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #69F;
}

#wrapper {
    width: 960px;
    margin-top: 60px;
}
#canvas #canvas1 {
    background-color: #FFFFFF;
    display: block;
}
#canvas1 {
    background-image: url(http://www.robtown.com/road/images/canvas1BG.jpg);
    background-repeat: repeat-x;
    background-position: left;
    padding: 0px;
    margin: 0px;
    width: 2000px;
}
#canvas2{
    background-image: url(http://www.robtown.com/road/images/canvas1BG.jpg);
    background-repeat: repeat-x;
    background-position: left;
    padding: 0px;
    margin: 0px;
    width: 2000px;
}
.container {
    height: auto;
    width: 960px;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.container .header {
    background-color: #CCC;
    height: 30px;
    width: 960px;
    margin: 0px;
    padding: 0px;
}
.container .header #menu {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 12px;
    padding-top: 6px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
}
.container .header #menu li {
    display: inline;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-weight: bold;
    font-size: 16px;
    padding-top: 4px;
    margin-top: 4px;
}
.container .content #canvasSeperator {
    background-color: #999;
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: 960px;
}
.container .content {
    height: auto;
    width: 960px;
}
.container #footer {
    background-color: #CCC;
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 960px;
}
.container .content #canvas1Div {
    height: 300px;
    width: 960px;
    overflow: auto;
}
.container .content #canvas2Div {
    height: 300px;
    width: 960px;
    overflow: auto;
}

JavaScript

window.onload =  function() {
          var windowWidth = 2000;
          
        var stage = new Kinetic.Stage({
          container: "canvas1",
          
          width: windowWidth,
          height: 300
        });
           var stage2 = new Kinetic.Stage({
          container: "canvas2",          
          width: windowWidth,
          height: 300
        });
        var dragBarLayer = new Kinetic.Layer(); 
        var dragBarLayer2 = new Kinetic.Layer(); 
        var culvertLayer = new Kinetic.Layer();
        var streetLayer = new Kinetic.Layer();
        var boxLayer = new Kinetic.Layer();
        var messageLayer = new Kinetic.Layer();
        var rectX = stage.getWidth() / 2 - 50;
        var rectY = stage.getHeight() / 2 - 25;

         var street = new Kinetic.Rect({
          x: 0,
          y: 90,
          width: windowWidth,
          height: 30,
          fill: "#999",
          
          draggable: false
        });
        var box = new Kinetic.Rect({
          x: rectX,
          y: rectY,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4,
          draggable: true
        });
        //
        
            var dragBox = new Kinetic.Rect({
                          x: 0,
                          y: 0,
                          width: 25,
                          height: 300,
                          fill: "yellow",
                          alpha: .5,
                          strokeWidth: 0,
                          dragConstraint: "horizontal",
                          draggable: true
                          });
    //dragBox.on("mousedown", updateXval(stage,messageLayer));

        dragBox.on("mouseup", function() {
            writeMessage(messageLayer, "");
            //dragBox2.y=dragBox.y;
            stage2.draw();
        });
                dragBarLayer.add(dragBox);        
        //
        
        var dragBox2 = new Kinetic.Rect({
           ...