JSFiddle - React, Tailwind, and code Playground

HTML

<div class="template" id="template">
    <div id="box">Some text!</div>
</div>

CSS

.template {
    width: 400px;
    height: 255px;
    position: relative;
    margin: 16px;
    border: 1px dotted #777;
    overflow: hidden;
}

#box {
    width: 100px;   
    border: 1px solid;
    background-color: red;
    position: absolute;
    left: 75px;
    top: 75px;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -sand-transform: rotate(90deg);
    transform: rotate(90deg);
    text-align: center;
    cursor: move;
}

JavaScript

$(document).ready(function () {
             var recoupLeft, recoupTop;
             $('#box').draggable({  
                 containment: "#template",
                 start: function (event, ui) {                     
                     var left = parseInt($(this).css('left'), 10);
                     left = isNaN(left) ? 0 : left;
                     var top = parseInt($(this).css('top'), 10);
                     top = isNaN(top) ? 0 : top;
                     recoupLeft = left - ui.position.left;
                     recoupTop = top - ui.position.top;
                 },
                 drag: function (event, ui) {
                         ui.position.left += recoupLeft;
                         ui.position.top += recoupTop;                     
                 }
             });
         });