JSFiddle - React, Tailwind, and code Playground

by Isaias Batista

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<div id="toolbar">
				
		    	<table align="center" cellspacing="20">	
				<tr>
				<!-- <figure> -->
			    <td align="center"> 
				<img id="host" class="tool" width=35 height=32 title = "Host" src="host.png"><input type="hidden" id="ho" value=""> <figcaption> Host </figcaption>
				</td>
				<td align="center">
				<img id="hub" class="tool" width=35 height=32 title = "Hub" src="hub.png"><input type="hidden" id="hu" value=""> <figcaption> Hub </figcaption>
				</td>
				<td align="center"> 
				<img id="vpcs" class="tool" width=35 height=32 title = "Vpcs" src="vpcs.png"><input type="hidden" id="vpc" value=""> <figcaption> VPCS </figcaption>
				</td>
				<td align="center"> 
				<img id="roteador" class="tool" width=35 height=32 title = "roteador" src="roteador.png"><input type="hidden" id="rot" value=""> <figcaption> Roteador </figcaption>
				</td>
				<td align="center">
				<img id="atm" class="tool" width=35 height=32 title = "Atm" src="atm.png"><input type="hidden" id="at" value=""> <figcaption> ATM </figcaption>
				</td>
				<td align="center">
				<img id="switche" class="tool" width=35 height=32 title ="Switch" src="switche.png"><input type="hidden" id="sw" value=""> <figcaption> Switch </figcaption>
				</td>
				<td align="center">
				<img id="cloud" class="tool" width=35 height=32 title = "Cloud" src="cloud.png"><input type="hidden" id="clo" value=""> <figcaption> Cloud </figcaption>
				</td>
				<td align="center">
				<img id="frame_delay" class="tool" width=35 height=32 title = "Frame Delay" src="frame_delay.png"><input type="hidden" id="fram" value=""> <figcaption> Frame...

CSS

body{padding:20px;}
      #toolbar{
			width:800px;
			height:72px;
      border:solid 1px blue;
  }
	#toolbar2{
			width:800px;
      height:72px;
			border:solid 1px blue;
 	}
	.tool{
			width:35px;
			height:32px;
	}
	#container{
			position:center;
			border:solid 1px #ccc;
      margin-top: 10px;
      width:800px;
      height:440px;
  }
	#buttons > input {
      padding: 10px;
      display: block;
      margin-top: 5px;
  }
  #buttons {
      position: absolute;
      top: 0px;
      left: 5px;
	  	padding: 1px;
	}		
	#myList {
		  margin: 1em;
			float: left;
	}
	#myList UL {
			padding: 0px;
			margin: 0em 1em;
	}
	#myList LI {
			width: 100px;
			border: solid 1px #2AA7DE;
			background: #6CC8EF;
			padding: 5px 5px;
			margin: 2px 0px;
			list-style: none;
	}

JavaScript

window.tableIndex = 0;
window.tablePositionList = [[], []];


// get a reference to the house icon in the toolbar
                // hide the icon until its image has loaded
                var $host = $("#host");
                $host.hide();

                var $hub = $("#hub");
                $hub.hide();

                var $vpcs = $("#vpcs");
                $vpcs.hide();
                
				var $roteador = $("#roteador");
                $roteador.hide();
                
                var $switche = $("#switche");
                $switche.hide();

                var $atm = $("#atm");
                $atm.hide();

                var $cloud = $("#cloud");
                $cloud.hide();
                
                var $frame_delay = $("#frame_delay");
                $frame_delay.hide();
                

                // get the offset position of the kinetic container
                var $stageContainer = $("#container");
                var stageOffset = $stageContainer.offset();
                var offsetX = stageOffset.left;
                var offsetY = stageOffset.top;
                // create the Kinetic.Stage and layer
                var stage = new Kinetic.Stage({
                    container: 'container',
                    width: 800,
                    height: 440
                });
                var layer = new Kinetic.Layer();
                stage.add(layer);
                
                
                
                // start loading the image used in the draggable toolbar element
                // this image will be used in a new Kinetic.Image
                var image1 = new Image();
                image1.onload = function () {
                    $host.show();
                };
                var image2 = new Image();  
                image2.onload = function () {
                    $hub.show();
                };
                var image3 = new Image();
                image3.onload = function () {
   ...