JSFiddle - React, Tailwind, and code Playground

HTML

<!--
 * Kinect javascript tutorial using zigfu.
 * http://kinect.tonkworks.com - Kevin Dagostino
 * No copyright - Use / modify / do with the code what you wish.
-->


<html>

<head>
<style>
    #kinectSkeletonBox {
        position:absolute;
        right: 10px;    
        background-color: black;
        width:    500px;
        height: 500px;
    }    
</style>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://kinect.tonkworks.com/media/kinectJs/Three.js"></script>
    <script type="text/javascript" src="http://kinect.tonkworks.com/media/kinectJs/RequestAnimationFrame.js"></script>
    <script src='http://cdn.zigfu.com/zigjs/zig.min.js'></script>

<div id="pluginContainer">
    <object id="zigPlugin" type="application/x-zig" width="0" height="0">
        <param name="onload" value="zigPluginLoaded">
    </object>
</div>


<script>

var k_camera, k_scene, k_renderer;
var skeletonPoints = [];


k_init();
k_animate();

//Initiate the three.js scene that we are going to draw dots onto.
//This is the black kinectSkeletonBox div

function k_init() {
    var k_container = document.createElement('div');
    
    k_container.setAttribute("id", "kinectSkeletonBox");

    var width = 500;
    var height = 500;

    document.body.appendChild(k_container);
    k_camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);
    
    k_camera.position.z = 250;
    k_scene = new THREE.Scene();
    k_renderer = new THREE.CanvasRenderer();
    k_renderer.setSize(width, height);
    k_container.appendChild(k_renderer.domElement);


    // skeleteon points initializations
    var geometry = new THREE.Geometry();
    for(var i = 0; i < 24; i++) {
        //Make 24 white circles for each of the joints we are going to recieve from the kinect feed.
        var material = new THREE.ParticleCanvasMaterial({
            color : 0xffffff,
            program :...