JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>Where have I been? - Demo</title>
    <meta name="description" content="Where have I been?" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1.4.2");
		google.load("jqueryui", "1.7.2");
	</script>

	<script type="text/javascript">
    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			       drop: function(ev, ui) {
              var X = event.pageX;
              var Y = event.pageY;
              console.log("Y:" + Y + " | " + "X:" + X);
              var offset = ui.draggable.offset();
              console.log("element:" + offset.top + " | " + "X:" + offset.left);

     ...

CSS

body {
	  text-align: center;
}
#wrapper {
	  text-align: left;
	  width: 720px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 200px;
	height:750px;
	border:1px solid black;
	float:left;
	background-color: #84acb3;
}

#frame{
	width:513px;
	height:750px;
	//background-image: url("../images/UK-Map.gif");
	background-repeat: repeat-y;
    	background-position: 0 0;
    	border:1px solid black;
    	float:right;
}

#tbldevs{
	border:1px solid black;
	width:80%;
	margin-left:50px;
	margin-top:10px;
}

#tbldevs th{
	text-align:center;
	height:50px;
	width:50px;
}

#tbldevs td{
	height:50px;
}


#drag1 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("https://s13.postimg.org/n39how52f/1-wifi.png");
	width:32px;
	height:32px;
}

#drag2 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("https://s13.postimg.org/el01kkdzb/2-modem.png");
	width:32px;
	height:32px;
}

#drag3 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("https://s13.postimg.org/c3oadamd3/3-router.png");
	width:32px;
	height:32px;
}

#drag4 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("https://s13.postimg.org/m0zb6d9ef/4-network.png");
	width:32px;
	height:32px;
}



.ui-draggable-helperMoving {
	border: 1px dotted #000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width:100px;
	height:100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000;
	width:5px;
	height:5px;
}



/* classes for dragged stuff */
.dragged1 {
	position:absolute;
	background-image: url("https://s13.postimg.org/n39how52f/1-wifi.png");
	width:32px;
	height:32px;
}

.dragged2 {
	position:absolute;
	background-image: url("https://s13.postimg.org/el01kkdzb/2-modem.png");
	width:32px;
	height:32px;
}

.dragged3 {
	position:absolute;
	background-image: url("https://s13.postimg.org/c3oadamd3/3-router.png");
	width:32px;
	height:32px;
}

.dragged4 {
	position:absolute;
	background-image:...

JavaScript

$(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			       drop: function(ev, ui) {
              var X = event.pageX;
              var Y = event.pageY;
              console.log("Y:" + Y + " | " + "X:" + X);
              var offset = ui.draggable.offset();
              console.log("element:" + offset.top + " | " + "X:" + offset.left);

      				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
      					counter++;
      					var element=$(ui.draggable).clone();

      					element.addClass("tempclass");
                var attr = $(this).attr('tempclass');
                if (typeof attr !== typeof undefined && attr !== false) {
                    console.log("!!!");
                }
      					$(this).append(element);
      					$(".tempclass").attr("id","clonediv"+counter);
      					$("#clonediv"+counter).removeClass("tempclass");

      					//Get the dynamically item id
      					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
      					itemDragged = "dragged" + RegExp.$1
      					console.log(itemDragged)

     ...