JSFiddle - React, Tailwind, and code Playground

HTML

<p>Drag the square and let the magic happen</p>
<div id="container">

    <div id="elem">
        <div class="elem-cell" >
            <span class="visual-elem">They see me Rollin'ggggg...</span>
        </div>
    </div>

</div>

CSS

#container{
    position:relative;
    left:20px;
    top:20px;
    display:inline-block;
}

#elem{
    display:table;
    border:none;
    background-color:orange;
    width:100px;
    height:100px;
    cursor:pointer;
}
#elem .elem-cell{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    padding:10px;
}

JavaScript

/*KAISARCODE ROTATE DIAL ****************************************************
*                                                                           *
*    Copyright (C) 2006 - 2015  KaisarCode.com                              *
*                                                                           *
*    This program is free software: you can redistribute it and/or modify   *
*    it under the terms of the GNU Lesser General Public License as         *
*    published by the Free Software Foundation, either version 3 of the     *
*    License, or (at your option) any later version.                        *
*                                                                           *
*    This program is distributed in the hope that it will be useful,        *
*    but WITHOUT ANY WARRANTY; without even the implied warranty of         *
*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
*    GNU Lesser General Public License for more details.                    *
*                                                                           *
*    You should have received a copy of the GNU General Public License      *
*    along with this program.  If not, see <http://www.gnu.org/licenses/>.  *
*                                                                           *
*****************************************************************************/

var kcRotateDial = function(elem) {
    var output = {};
    
    //Preventing elem to being selected on IE
    if(document.all && !window.opera) elem.setAttribute("unselectable","on");
    
    //Public Properties
    output.rad = 0;
    output.deg = 0;
    output.per = 0;
    output.fullRad = 0;
    output.fullDeg = 0;
    output.fullPer = 0;
    output.spin = 0;
    output.clock = false;
    
    //Private properties
    var drag = false;
    var pos = [];
    var size = [];
    var axis = [];
    var cursor = [];
    var rad = 0;
    var lastRad = 0;
    var lastPer = 0;
    var...