JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.gbin1.com/gbin1/admin/scripts/jqueryui/jquery-ui-1.8.13.custom.min.js"></script>
<link rel="stylesheet" href="http://www.gbin1.com/technology/javascript/jsorgchart/js/base.css">
<link rel="stylesheet" href="http://www.gbin1.com/technology/javascript/jsorgchart/js/Spacetree.css">
<script src="http://www.gbin1.com/technology/javascript/jsorgchart/js/jit-yc.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>GBin1.com Org Chart</title>      
        <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
        <meta name="description" content="org chart demo" />
        <meta name="keywords" content="gbin1" />
        <meta name="author" content="terry li - www.gbin1.com" />              
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://www.gbin1.com/gbin1/admin/scripts/jqueryui/jquery-ui-1.8.13.custom.min.js" ></script>
        <link href="http://www.gbin1.com/gbin1/admin/scripts/jqueryui/css/ui-darkness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />

        <!--[if IE]><script language="javascript" type="text/javascript" src="http://www.gbin1.com/technology/javascript/jsorgchart/js/jit/excanvas.js"></script><![endif]-->

    </head>
    <body>
    
    <script type="text/javascript">
    jQuery(function(){
        startorgchart();
    });
    </script>
    <body>
    <div id="wrap">
        <div id="orgchart">
            <div id="orgchartloader"></div>
            <div id="orgchartori">            
                <table>
                <tr>
                <td></td>
                <td>                
                    <li class="ui-state-default ui-corner-all" id="bottom">
               ...

JavaScript

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('orgchartloader');
    this.elem.innerHTML = text;
    this.elem.style.left = (480 - this.elem.offsetWidth/2) + 'px';
  }
};


function startorgchart(){
    
    //Create node line
    $jit.ST.Plot.NodeTypes.implement({
        'nodeline': {
          'render': function(node, canvas, animating) {
                if(animating === 'expand' || animating === 'contract') {
                  var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
                  var width  = nconfig.width, height = nconfig.height;
                  var algnPos = this.getAlignedPos(pos, width, height);
                  var ctx = canvas.getCtx(), ort = this.config.orientation;
                  ctx.beginPath();
                  if(ort == 'left' || ort == 'right') {
                      ctx.moveTo(algnPos.x, algnPos.y + height / 2);
                      ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
                  } else {
                      ctx.moveTo(algnPos.x + width / 2, algnPos.y);
                      ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
                  }
                  ctx.stroke();
              } 
          }
        }
          
    });
    
    //Create a new instance
    var st = new $jit.ST({
        'injectInto': 'orgchart',
        //set duration for the animation
        duration: 800,
        //set animation transition type
        transition: $jit.Trans.Quart.easeInOut,
        levelDistance: 50,
        levelsToShow: 1,
        Node: {
            height: 45,
            width: 120,
            type: 'nodeline',
            color:'#23A4FF',
            lineWidth: 2,
            align:"center",
            overridable: false
        },
        
        Edge: {
            type: 'bezier',
            lineWidth: 2,
            color:'#23A4FF',
            overridable: true
        },
        
       ...