JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="spectrum"></div>

CSS

#spectrum {
                border: 1px solid #aaa;  
            }

JavaScript

$(function() {
                var scale = 1,
                    canvasW = 569,
                    canvasH = 256;
                    
                 var width = 100,
                    height = 100,
                    x0 = (canvasW*scale/2) + (width/2),
                    y0 = (canvasH*scale/2) - (height/2);
                    
                var resizerRadius = 10;
                                   
                var Spectrum = {};
                
                Spectrum.paper         = Raphael('spectrum', canvasW*scale, canvasH*scale);
                Spectrum.rect         = Spectrum.paper.rect(x0, y0, width, height);
                Spectrum.resizer     = Spectrum.paper.circle(x0 + width, y0 + height, resizerRadius);
                Spectrum.scale = {
                    x: 1,
                    y: 1
                };
                Spectrum.rect.attr({fill: 'red'});
                Spectrum.resizer.attr({fill: 'yellow'});
                
                Spectrum.rect.drag(
                    function(dx, dy, x, y) {
                        this.attr({x: this.ox + dx/Spectrum.scale.x, y: this.oy + dy/Spectrum.scale.y});
                        Spectrum.resizer.attr({cx: this.rox + dx, cy: this.roy + dy});
                    },
                    function() {
                        this.ox = this.attr("x");
                        this.oy = this.attr("y");
                        this.rox = Spectrum.resizer.attr('cx');
                        this.roy = Spectrum.resizer.attr('cy');
                    },
                    function() {
                    }
                )
                
                Spectrum.resizer.drag(
                    function(dx, dy) {
                        this.attr({cx: this.ox + dx, cy: this.oy + dy});
                        this.scaleX = Spectrum.scale.x + dx*2 / Spectrum.rect.attr('width');
                        this.scaleY = Spectrum.scale.y + dy*2     / Spectrum.rect.attr('height');
          ...