JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.kineticjs.com/download/kinetic-v3.6.4.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

JavaScript

var data = {
    'id': 'root',
    'name': 'Intero',
    'logo': 'images/intero_logo120x120.png',
    'data' : {
        "audios":['test.mp3'],
        "documents":['DecemberTasksFinal.txt'],
        "images":['jason_jones.png'],
        "videos":['the_maxx.mov']
    }
}
    
// GLOBALS
    var randomHexGenerator = function(){
        return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
            return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('')
    }
    
    Kinetic.Orb = function(config) {
        var name = config.shapeName;
        var x = config.x || 0;
        var y = config.y || 0;
        this.radius = config.radius || 70;
        var color = config.color || randomHexGenerator();
        var opacity = config.opacity || 1;
        this._x = x;
        this._y = y;
        
        var draw = function(){
            var context = this.getContext();
            var canvas = this.getCanvas();
            context.beginPath();
            context.arc(x, y, this.radius, 0, Math.PI *2, true);
            context.fillStyle = color;
            context.fill();
            context.stroke();
            canvas.style.opacity = opacity;
        }
        Kinetic.Shape.apply(this, [draw, name]);
    }
    
    Kinetic.Orb.prototype = new Kinetic.Shape();
    
    var drawBackground = function(layer) {
        var canvas = layer.getCanvas();
        var context = layer.getContext();
        context.fillStyle = '#000';
        context.fillRect(0,0,800,600);
    }
    
    var getChildren = function(appParent, appLayer) {
        this.angle = 0;
        var toRadians = Math.PI / 180;
        var count = 0;
        var padding = 30;
        
        for(i in data.data) {
            count++;
        }
        
        this.angleChange = (360/count);
        
        for(key in data.data) {
            (function(){
                var x = parseInt((Math.cos(this.angle * toRadians) * (appParent.radius + padding)) + ((appParent._x)));
               ...