JSFiddle - React, Tailwind, and code Playground

by Asad Iqbal

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.css">
    <div class="main">
   
        <div class="container">
            <div class="board">
                <div class="item text">
                    <div class="inner">ALL PROGRESS TAKES PLACE OUTSIDE THE COMFORT ZONE</div>
                </div>
            </div>
        </div>

    </div>

CSS

body {
    margin: 0;
}

body{
    overflow: hidden;
}

.main{
    background: #fff;
    padding-top:1px;
}

.container{
    width:98%;
    margin: auto;
}

.board{
    width: 900px;
    height:600px;
    background: #fff;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.board .item.active{
    z-index: 2;
}

.board .item{
    width:200px;
    position: absolute;
    left: 20px;
    top: 20px;
}

.controls{
    width:200px;
    position: absolute;
    padding: 10px;
    border: 1px dashed rgba(0,0,0,.5);
}

.item.text{
    cursor: move;
    width:435px;
}

.text .inner{
    font-size: 600%;
    transform: scale(0.25);
    transform-origin: left top 0;
    width: 1741px;
    word-wrap: break-word;
}

.txt-editable{
    position: absolute;
    z-index: 10;
}

.txt-editable .inner{
    transform-origin: left top 0;
    word-wrap: break-word;
}


.ui-rotatable-handle {
    height: 16px;
    width: 16px;
    cursor: pointer;
    
    background-size: 100%;
    position: absolute;
    left: 48%;
    top: 100%;
    margin-top:15px;
}

.ui-rotatable-handle:before{
    content: '';
    position: absolute;
    left: 50%;
    top: -15px;
    width: 0;
    height: 15px;
    margin-left: -1px;
    border-left: 1px dashed #3f4652;
    background-color: #fff;
}

.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 9px;
	right: -7px;
	top: 47%;
	height: 9px;
	background: #00c4cc;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 9px;
	left: -7px;
	top: 47%;
	height: 9px;
	background: #0604cc;
}
.ui-resizable-se {
	cursor:...

JavaScript

function resize_text(controls, elem){
    var options = {
        aspectRatio: false,
        handles: 'se, sw',
        alsoResize: elem,
        create: function(event, ui) {
            var values = transform_matrix($(this));
            if(values !== 'none') {
                var a = values[0];
                var b = values[1];
                var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
            }
            else {
                var angle = 0;
            }

            if(angle < 0)
                angle +=360;


            if((angle >= 0 && angle  <= 22 ) || (angle>= 158 && angle <= 202) || (angle >= 338 && angle <= 360))
            {
                $(this).parent().find('.ui-resizable-sw').css({
                    'cursor': 'w-resize'
                });

                $(this).parent().find('.ui-resizable-se').css({
                    'cursor': 'e-resize'
                });
            }
            else if((angle >= 23 && angle <= 67) || (angle >= 203 && angle <= 247))
            {
                $(this).parent().find('.ui-resizable-sw').css({
                    'cursor': 'nw-resize'
                });

                $(this).parent().find('.ui-resizable-se').css({
                    'cursor': 'se-resize'
                });

            }
            else if((angle >=68 && angle <= 112) || (angle >= 248 && angle <= 292))
            {
                $(this).parent().find('.ui-resizable-sw').css({
                    'cursor': 's-resize'
                });

                $(this).parent().find('.ui-resizable-se').css({
                    'cursor': 'n-resize'
                });

            }
            else if((angle >=113 && angle <= 157) || (angle >=293 && angle <= 337))
            {
                $(this).parent().find('.ui-resizable-sw').css({
                    'cursor': 'sw-resize'
                });

                $(this).parent().find('.ui-resizable-se').css({
                    'cursor':...