JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="viewport">
  <div id="viewport-con" style="transform: scale(0.37) translate(-77px, 884px);">
    <div class="step" style="left:100px;top:-600px;"></div>
    <div class="step" style="left:100px;top:-400px;"></div>
  </div>
</div>

CSS

#viewport{
	width:100%;
  height:100%;
  overflow:hidden;
  position:absolute;
  background-color:black;
}
#viewport-con {
  position:absolute;
  width:100%;
  height:100%;
}
.step {
  position:absolute;
  width:300px;
  height:100px;
  background-color:red;
}
.step.ui-selecting {
  background-color:lightblue;
}
.step.ui-selected {
  background-color:blue;
}
.ui-selectable-helper {
  border:1px solid white !important;
  z-index:1000;
  position:absolute;
}

JavaScript

$(document).ready(function() {
	$('#viewport').selectable({
		filter: '.step'
	});
});

$.widget( "ui.selectable", $.ui.mouse, {
	version: "1.12.1",
	options: {
		appendTo: "body",
		autoRefresh: true,
		distance: 0,
		filter: "*",
		tolerance: "touch",

		// Callbacks
		selected: null,
		selecting: null,
		start: null,
		stop: null,
		unselected: null,
		unselecting: null
	},
	_create: function() {
		var that = this;

		this._addClass( "ui-selectable" );

		this.dragged = false;

		// Cache selectee children based on filter
		this.refresh = function() {
			that.elementPos = $( that.element[ 0 ] ).offset();
			that.selectees = $( that.options.filter, that.element[ 0 ] );
			that._addClass( that.selectees, "ui-selectee" );
			that.selectees.each( function() {
				var $this = $( this ),
					selecteeOffset = $this.offset(),
					pos = {
						left: selecteeOffset.left - that.elementPos.left,
						top: selecteeOffset.top - that.elementPos.top
					};
        $fixedRect = $(this)[0].getBoundingClientRect();
				$.data( this, "selectable-item", {
					element: this,
					$element: $this,
					left: pos.left,
					top: pos.top,
					//right: pos.left + $this.outerWidth()-200,
					//bottom: pos.top + $this.outerHeight()-50,
					right: pos.left + $fixedRect.width,
					bottom: pos.top + $fixedRect.height,
					startselected: false,
					selected: $this.hasClass( "ui-selected" ),
					selecting: $this.hasClass( "ui-selecting" ),
					unselecting: $this.hasClass( "ui-unselecting" )
				} );
			} );
		};
		this.refresh();

		this._mouseInit();

		this.helper = $( "<div>" );
		this._addClass( this.helper, "ui-selectable-helper" );
	},

	_destroy: function() {
		this.selectees.removeData( "selectable-item" );
		this._mouseDestroy();
	},

	_mouseStart: function( event ) {
		var that = this,
			options = this.options;

		this.opos = [ event.pageX, event.pageY ];
		this.elementPos = $( this.element[ 0 ] ).offset();

		if ( this.options.disabled )...