JSFiddle - React, Tailwind, and code Playground

HTML

<div id="resize-box">
    <span class="cursor-north"></span>
    <span class="cursor-south"></span>
    <span class="cursor-west"></span>
    <span class="cursor-east"></span>
    <span class="cursor-north-west"></span>
    <span class="cursor-north-east"></span>
    <span class="cursor-south-west"></span>
    <span class="cursor-south-east"></span>
</div>

CSS

body { margin: 0; padding: 0; }

#resize-box {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}
.cursor-north,
.cursor-south,
.cursor-west,
.cursor-east,
.cursor-north-west,
.cursor-north-east,
.cursor-south-west,
.cursor-south-east {
    width: 7px;
    height: 7px;
    background-color: red;
    position: absolute;
}

.cursor-north { cursor: n-resize; left: 50%; margin-left: -3px; top: -4px; }
.cursor-south { cursor: s-resize; left: 50%; margin-left: -3px; bottom: -4px; }
.cursor-west { cursor: w-resize; left: -4px; top: 50%; margin-top: -3px; }
.cursor-east { cursor: e-resize; right: -4px; top: 50%; margin-top: -3px; }
.cursor-north-west { cursor: nw-resize; left: -4px; top: -4px; }
.cursor-north-east { cursor: ne-resize; right: -4px; top: -4px; }
.cursor-south-west { cursor: sw-resize; left: -4px; bottom: -4px; }
.cursor-south-east { cursor: se-resize; right: -4px; bottom: -4px; }

JavaScript

jQuery.fn.extend({
    /**
     *   jQuery.fn.resize(options)
     */
    resize: function(options) {
        var controlSelector = '.cursor-north, .cursor-south, .cursor-west, .cursor-east,' +
                              '.cursor-north-west, .cursor-north-east, .cursor-south-west, .cursor-south-east';
        $(this).each(function(){
            var 
                // 上、下、左、右、左上、右上、左下、右下 八个点的鼠标拖动时的事件处理程序
                up, down, left, right, upLeft, upRight, downLeft, downRight,

                // 鼠标拖动时的事件处理程序
                handleEvent,

                // 记录鼠标按下时鼠标的位置
                clientX, clientY,

                // 记录鼠标按下时元素的大小及位置
                w, h, l, t,

                // 目标元素
                $target = $(this), self = this;

            up = function(e){
                var diffY = e.clientY - clientY;
                $target.css({
                    height: h - diffY + 'px',
                    top: t + Math.min(diffY, h) + 'px'
                });
                e.preventDefault();
            };
            down = function(e){
                var diffY = e.clientY - clientY;
                $target.css({
                    height: h + diffY + 'px'
                });
                e.preventDefault();
            };
            left = function(e){
                var diffX = e.clientX - clientX;
                $target.css({
                    width: w - diffX + 'px',
                    left: l + Math.min(diffX, w) + 'px'
                });
                e.preventDefault();
            };
            right = function(e){
                var diffX = e.clientX - clientX;
                $target.css({
                    width: w + diffX + 'px'
                });
                e.preventDefault();
            };
            upLeft = function(e){
                var diffX = e.clientX - clientX,
                    diffY = e.clientY - clientY;
                $target.css({
                    height: h - diffY + 'px',
               ...