JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class='abcde' style='border:1px solid blue; width:400px;height:400px;'>


  <div id="div1" style='border:1px solid red; width:50px;height:50px;'>

    <div class="upper-triangle"></div>
    <div class="lower-triangle"></div>


  </div>
</div>

CSS

.upper-triangle {
    width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top-width: 25px;
  border-right: 50px solid lightskyblue;
  transition: border-width 50ms ease-in;
}

.lower-triangle {
    width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-width: 25px;
  border-right: 50px solid lightskyblue;
  transition: border-width 50ms ease-in;
}

.ui-resizable-handle {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

.ui-resizable-n {
  top: -10px;
  left: 50%;
}

.ui-resizable-e {
  right: -10px;
  top: 50%;
}

.ui-resizable-s {
  bottom: -10px;
  left: 50%;
}

.ui-resizable-w {
  left: -10px;
  top: 50%;
}

.ui-resizable-nw {
  left: -10px;
  top: -10px;
}

.ui-resizable-ne {
  top: -10px;
  right: -10px;
}

.ui-resizable-sw {
  bottom: -10px;
  left: -10px;
}

.ui-resizable-se {
  bottom: -10px;
  right: -10px;
}

JavaScript

$(document).ready(function() {
            var windowWidth = $("#div1").width();
            var windowHeight = $("#div1").height();

            $("#div1").draggable({
                containment: ".abcde"
            });
        });

        $("#div1").resizable({
            handles: "ne,se",
            containment: ".abcde",
            minHeight: 40,
            minWidth: 40
        }, {
            start: function(e, ui) {


            },
            resize: function(e, ui) {
                var height = Math.round(ui.size.height);
                var width = Math.round(ui.size.width);
            },
            stop: function(e, ui) {
                var height = Math.round(ui.size.height);
                var width = Math.round(ui.size.width);
                var diff = Math.abs(ui.size.height - ui.originalSize.height);
                var bottomW = parseInt($(".lower-triangle").css("borderBottomWidth"),10);
                var topW = parseInt($(".upper-triangle").css("borderTopWidth"),10);
                if (ui.size.height > ui.originalSize.height) {
                    if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                    $(".lower-triangle").css({
                        "border-bottom-width": (bottomW + diff) + 'px'
                    });
                } else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
                    $(".upper-triangle").css({
                        "border-top-width":  (topW + diff) + 'px'
                    });
                }
                }
                else {
                    if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                        if ((bottomW - diff)>0) {
                            $(".lower-triangle").css({
                                "border-bottom-width": (bottomW - diff) + 'px'
                            });
                        }
                        else {
                            $(".lower-triangle").css({
        ...