JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
    <div id="formBox" style="height: 9248.627450980393px;">
        <div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
            <div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
                <form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
                    <div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
                        <div class="formContent">
                            <div class="formBackground">
                                <div id="123" name="" class="text" style="text-align:left;font-size:14px;top:123.42940689655px;left:80.427406896552px;width:200px;height:20px;line-height:20px;">textbox_1425714590831</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

CSS

div.text {
    font-family: Arial, sans-serif;
    font-size:14px;
    background-color:#E2F4FE;
    outline: 0;
    border:0;
    width:100%;
    height:20px;
    padding: 0;
    position:absolute;
    cursor:move;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
}
#pageContent {
    position:relative;
    padding-bottom:20px;
    background-color:#fff;
    z-index:2;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
#formBox {
    display: block;
    position: relative;
    height: 100%;
    padding: 15px;
}
.trimSpace {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#formScale::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formScale {
    position:relative;
    width:816px;
    margin:0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
}
.formContainer {
    position:relative;
    margin : 0 auto 15px auto;
    padding:0;
}
.formContent {
    position:absolute;
    width:100%;
    height:100%;
}
.formBackground {
    width:100%;
    height:100%;
    background-color:red;
}
body,.trimSpace,.formContainer,#formBox{
    margin:0px !important;
    padding:0px !important;
}

JavaScript

var PAGEWIDTH = 816, percent;

$(window).resize(function (e) {
    zoomProject();
    resize();
});

(function($) {
  $.fn.drags = function(opt) {

    opt = $.extend({handle:"",cursor:"move"}, opt);

    if(opt.handle === "") {
      var $el = this;
    } else {
      var $parent = this;
      var $el = this.find(opt.handle);
    }

    return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

      if(opt.handle === "") {
        var $drag = $(this).addClass('draggable');
      } else {
        $(this).addClass('active-handle')
        var $drag = $parent.addClass('draggable');
      }

      var drg_h = $drag.outerHeight(),
	        drg_w = $drag.outerWidth(),
	        pos_y = $drag.offset().top/percent + drg_h - e.pageY/percent,
	        pos_x = $drag.offset().left/percent + drg_w - e.pageX/percent;

      follow = function(e) {
        var size = {
          top:e.pageY/percent + pos_y - drg_h+percent*2,
          left:e.pageX/percent + pos_x - drg_w+percent*2
        };

          $("#formScale").css({ 'transform': 'scale(1)', '-moz-transform': 'scale(1)', '-webkit-transform': 'scale(1)', '-ms-transform': 'scale(1)'});
          $drag.offset(size);
          $("#formScale").css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')'});

      };

      $(window).on("mousemove", follow).on("mouseup", function() {
        $drag.removeClass('draggable');
        $(window).off("mousemove", follow);
      });

      e.preventDefault(); // disable selection

    }).on("mouseup", function() {
        if(opt.handle === "") {
          $(this).removeClass('draggable');
        } else {
          $(this).removeClass('active-handle');
          $parent.removeClass('draggable');
        }
      });

  }
})(jQuery);

$("#123").drags({}, function(e){ });

function resize() {
    $("#pageContent").css('height', window.innerHeight - 45 +...