JSFiddle - React, Tailwind, and code Playground

by mjerzak6

HTML

<canvas id="canvas" width=500 height=600></canvas>
<div style="padding: 50px">
blank
</div>
<div style="width: 500px;">
    <!--span id="bouncy01">Drip</span>
    <span id="bouncy02">drop</span-->
    A bunch of text. A bunch <span id="end8" class="blah">of</span> text. A bunch of text. A bunch of text. <span id="end6" class="blah">AA</span> bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. A bunch of text. 
    There is a lot of text <span id="end3" class="blah">before</span> <span id="end2" class="blah">this</span> and then some more text before eeeeeeeeeeeeeeeeeeeeee
    <span id="start" class="blah">Drip</span>
    and between <span id="end5" class="blah">them</span> so that that that that  that <span id="end4" class="blah">that</span> that that that that
    <span id="end" class="blah">drop</span>
    will not be next to it. More text at the end. More text at the very end. More text at the end. More text at the end. More text at the <span id="end7" class="blah">eeeend</span>. More text at the end. More text at the end. More text at the end. More text at the end.
<div>
<div class="hi-icon-wrap hi-icon-effect-8">
  <span class="hi-icon hi-icon-user">blah</span>
</div>

CSS

/*@-webkit-keyframes bounce {
    0% { padding-top:1px;}
    50% { padding-top:5px;}
    100% { padding-top:1px;}
}

#bouncy01,
#bouncy02 {
    margin:10px;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
    width:30px;
       position:absolute;
}
#bouncywrap {
    -webkit-animation:bounce 0.5s ease-in-out infinite;
    position:relative;
    width:140px;
    height:50px;
}
#bouncy02 {
    background: #ffff00;
    left:200px;
    top:2px;
}
#bouncy02:hover {
    position:relative;
    top:0px;
}*/

#canvas {
    position:absolute;
    border:1px solid red;
    //width:100%;
    //height:100%;
    //display: none;
    z-index: -5;
}

.blah {
  background-color: lightblue;
}



/*.hi-icon-wrap {
	text-align: center;
	margin: 0 auto;
	padding: 2em 0 3em;
}*/

.hi-icon {
	display: inline-block;
	//font-size: 0px;
	cursor: pointer;
	margin: 15px 30px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	//z-index: 1;
	//color: #fff;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.hi-icon:before {
	//font-family: 'ecoicon';
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

/* Effect 8 */
.hi-icon-effect-8 .hi-icon {
	background: rgba(255,255,255,0.1);
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
}

.hi-icon-effect-8 .hi-icon:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform:...

JavaScript

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dojo/dom-style",
    "dojo/_base/connect",
    "dojo/on",
    "dojo/_base/fx",
    "dojo/fx",
    "dojo/dom-geometry",
    "dojo/dom",
    "dojo/mouse"
], function(
    declare,
    lang,
    domConstruct,
    domStyle,
    connect,
    on,
    baseFx,
    fx,
    geom,
    dom,
    mouse
){
//return declare("Blah", [], {

//constructor: function() {

console.log("Start");
var nodes = [dom.byId("start"), dom.byId("end"), dom.byId("end2"), dom.byId("end3"), dom.byId("end4"), dom.byId("end5"), dom.byId("end6"), dom.byId("end7"), dom.byId("end8")];
console.log(nodes);

var canvas = dom.byId("canvas");
console.log(canvas);
//domStyle.set(canvas, "display", "none");
domStyle.set(canvas, "opacity", "0");
var ctx = canvas.getContext("2d");

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
var canvas_width = 300;
var canvas_height = 300;
ctx.lineWidth = 3;

//var canvasOffset = canvas.offset();
//var offsetX = canvasOffset.left;
//var offsetY = canvasOffset.top;

for (var i = 0; i < nodes.length; ++i) {
		var connectors = [];
		for (var j = 0; j < nodes.length; ++j) {
    		if (i === j) {
            continue;
        }
        connectors.push({
            from: nodes[i],
            to: nodes[j]
        });
    }
		console.info("here3");
    on(nodes[i], mouse.enter, lang.hitch(this, function(connectors, args) {
      console.info("Mouse Entered")
      connect(connectors);
      var anim = baseFx.fadeIn({
        node: canvas,
        end: .1,
        duration: 1000
      });
      on(anim, "End", function(n1, n2){
              console.log("Done");
          });
      anim.play();

    }, connectors));
    on(nodes[i], mouse.leave, lang.hitch(this, function(connectors, args) {
      var anim = baseFx.fadeOut({
        node: canvas,
        duration: 1000
      });
      on(anim, "End", function(n1, n2){
              console.log("Done");
          });
  ...