JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/j-ulrich/jquery-simulate-ext/master/libs/jquery.simulate.js"></script>
<script src="http://rawgithub.com/j-ulrich/jquery-simulate-ext/master/src/jquery.simulate.ext.js"></script>
<script src="http://rawgithub.com/j-ulrich/jquery-simulate-ext/master/src/jquery.simulate.drag-n-drop.js"></script>
<script type="text/javascript" >
function dragable(Element, TargetElement, dropCallback) {
	var _bDown = false;
	
	var startX, startY;
	var orignX, orignY;
	var deltaX, deltaY;
	
	var _elClone;
	
	if(document.addEventListener) {
		Element.addEventListener("mousedown", onMousedown, true);
		document.addEventListener("mousemove", onMousemove, true);
		document.addEventListener("mouseup", onMouseup, true);
	}
	else if (document.attachEvent) {
		Element.setCapture();
		Element.attachEvent("onmousedown", onMousedown);
		document.attachEvent("onmousemove", onMousemove);
		document.attachEvent("onmouseup", onMouseup);
		Element.attachEvent("onlosecapture", onMouseup);
	}
	
	function onMousedown(e){
		if(!e) e = window.event;
			
		var rect = Element.getBoundingClientRect();
		startX = e.clientX;
		startY = e.clientY;
		orignX = rect.left+scrollX();//Element.offsetLeft;
		orignY = rect.top+scrollY();//Element.offsetTop;
		deltaX = startX - orignX;
		deltaY = startY - orignY;
		
		_elClone = Element.cloneNode(true);
		_elClone.removeAttribute('id');
		
		_elClone.style.zIndex = 1000;
		document.body.appendChild(_elClone);
		
		if (e.stopPropagation) e.stopPropagation();
		else e.cancelBubble = true;
		
		if (e.preventDefault) e.preventDefault();
		else e.returnValue = false;
		
		_bDown = true;
		onMousemove(e);
	}
	
	function onMousemove(e){
		if(!e) e = window.event;
		if(!_bDown) return;
		
		_elClone.style.left = (e.clientX - deltaX) + "px";
		_elClone.style.top = (e.clientY - deltaY) + "px";
		
		if(e.stopPropagation) e.stopPropagation();
		else e.cancelBubble = true;
	}
	
	function onMouseup(e){
		if(!e) e = window.event;
		if(!_bDown)...

CSS

<style type="text/css">
@CHARSET "UTF-8";

a {
	text-decoration: none;
}


#display_panel {
	width: 720px;
	height: 340px;
	background-color: black;
	padding: 0 0 25px 20px;
	
}

#shelf {
	width: 100%;
	height: 100%;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.product {
	position: relative;
	float: left;
	width: 120px;
	height:150px;
	background-color: #556c7c;
	margin: 25px 20px 0 0; 
	cursor: pointer;
}
.product .name {
	position: absolute;
	
}
.product .price {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 20px;
	text-align: center;
	background-image: url(../images/pbb.jpg);
	font-size: 16px;
	font-weight: bold;
}
.product.soldout .price {
	background-color: #FF4D50;
	text-decoration: line-through;	
}

#coin_panel {
	position: relative;
	width: 740px;
	height: 270px;
	background-image: url(../images/blue1024.jpg);
}
#insert {
	position: absolute;
	width: 125px;
	height: 30px;
	padding: 5px;
	background-image: url(../images/pb.jpg);
	top: 80px;
	left: 100px;
	text-align: right;
	font-size: 25px;
	font-color: white;
	font-weight: bold;
}
#btnReturn {
	position: absolute;
	background-image: url(../images/pb.jpg);
	width: 135px;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	left: 100px;
	top: 180px;
	padding: 5px 0 5px 0;
	color: white;
}
#wallet {
	position: absolute;
	background-image: url(../images/pb.jpg);
	width: 230px;
	height: 250px;
	left: 450px;
	top: 10px;
}
#coins {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.coin {
	position: relative;
	width: 120px;
	height: 50px;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
}
.money {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url(../images/pig.jpg);

}
.money_name {
	position: absolute;
	top: 15px;
	left: 55px;
	font-size: 16px;
	font-weight: bold;
}
#my_money {
	position: absolute;
	width: 100%;
	bottom: 0px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}

#console {
	width: 740px;
	height: 200px;
	background-color:...

JavaScript

<script type="text/javascript" >
function dragable(Element, TargetElement, dropCallback) {
	var _bDown = false;
	
	var startX, startY;
	var orignX, orignY;
	var deltaX, deltaY;
	
	var _elClone;
	
	if(document.addEventListener) {
		Element.addEventListener("mousedown", onMousedown, true);
		document.addEventListener("mousemove", onMousemove, true);
		document.addEventListener("mouseup", onMouseup, true);
	}
	else if (document.attachEvent) {
		Element.setCapture();
		Element.attachEvent("onmousedown", onMousedown);
		document.attachEvent("onmousemove", onMousemove);
		document.attachEvent("onmouseup", onMouseup);
		Element.attachEvent("onlosecapture", onMouseup);
	}
	
	function onMousedown(e){
		if(!e) e = window.event;
			
		var rect = Element.getBoundingClientRect();
		startX = e.clientX;
		startY = e.clientY;
		orignX = rect.left+scrollX();//Element.offsetLeft;
		orignY = rect.top+scrollY();//Element.offsetTop;
		deltaX = startX - orignX;
		deltaY = startY - orignY;
		
		_elClone = Element.cloneNode(true);
		_elClone.removeAttribute('id');
		
		_elClone.style.zIndex = 1000;
		document.body.appendChild(_elClone);
		
		if (e.stopPropagation) e.stopPropagation();
		else e.cancelBubble = true;
		
		if (e.preventDefault) e.preventDefault();
		else e.returnValue = false;
		
		_bDown = true;
		onMousemove(e);
	}
	
	function onMousemove(e){
		if(!e) e = window.event;
		if(!_bDown) return;
		
		_elClone.style.left = (e.clientX - deltaX) + "px";
		_elClone.style.top = (e.clientY - deltaY) + "px";
		
		if(e.stopPropagation) e.stopPropagation();
		else e.cancelBubble = true;
	}
	
	function onMouseup(e){
		if(!e) e = window.event;
		if(!_bDown) return;
		
		var targetRect = TargetElement.getBoundingClientRect();
		var cloneRect = _elClone.getBoundingClientRect();
		var targetDrop;	
		if(cloneRect.right > targetRect.left && cloneRect.left < targetRect.right &&
				cloneRect.top < targetRect.bottom && cloneRect.bottom > targetRect.top){
			targetDrop = true;
		} else...