JSFiddle - React, Tailwind, and code Playground

by neosoyn

HTML

<div id="scale">
  <span id="drop-1" class="drop"></span>
  
  <span id="drag-1" class="drag"></span>
</div>

CSS

#scale {
	-moz-transform: scale(0.50, 0.50); 
	-webkit-transform: scale(0.50, 0.50); 
	-o-transform: scale(0.50, 0.50);
	-ms-transform: scale(0.50, 0.50);
	transform: scale(0.50, 0.50); 
	-moz-transform-origin: top left;
	-webkit-transform-origin: top left;
	-o-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}

#drop-1 {
  display: block;
	background-color: red;
	width: 200px;
	height: 150px;
	left: 78px;
	top: 149px;
}

#drag-1 {
  position: relative;
  top: 100px;
  cursor: pointer;
  display: block;
  background-color: blue;
  height: 25px;
  width: 25px;
}

JavaScript

$("#drop-1").droppable({
  over: function() {
				$(this).css({'opacity' : '.4'});
			},
			out: function() {
				$(this).css({'opacity' : '1'});
			}
});

$("#drag-1").draggable();