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',
		start:function() {
    	console.log($('.ui-selectable-helper'));
		},
		selected: function(event,ui){
			console.log($('.ui-selectable-helper').css('border'));
		},
    end:function() {
    	console.log($('.ui-selectable-helper'));
    }
	});
});