JSFiddle - React, Tailwind, and code Playground

by joaovmvini

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="root">

</div>

CSS

.jorg {
    position: relative;
    overflow: hidden;
}

.jorg-hide-scrollbars {
    overflow: hidden !important;
}

.jorg.fullscreen-mode {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #fff;
}

.jorg-scrollParent {
    overflow: auto;
}
.jorg > ul {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    position: relative;
    overflow: auto;
    display: block !important;
}

.jorg-scrollParent {
    overflow: auto;
}
.jorg > ul {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    padding: 40px;
    display: block !important;
}

.jorg > ul > li {
   position: absolute;
   left: 0;
   min-width: 100%;
   background: transparent;
   min-height: 100%;
}

.jorg-search {
    position: absolute;
    left: 25px;
    top: 25px;
}

.jorg-tf-tree {
    font-size: 16px;
}

.jorg-tf-tree ul {
    box-sizing: border-box;
}

.jorg-tf-tree ul {
    display: inline-flex;
}

.jorg-tf-tree li {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 1em;
    position: relative
}

.jorg-tf-tree li ul {
    margin: 2em 0;
    margin-right: 40px;
}

.jorg-tf-tree li li:before {
    border-top: 3.5px solid #CCC;
    content: "";
    display: block;
    height: .0625em;
    left: -.03125em;
    position: absolute;
    top: -1.03125em;
    width: 100%
}

.jorg-tf-tree li li:first-child:before {
    left: calc(50% - .03125em);
    max-width: calc(50% + .0625em)
}

.jorg-tf-tree li li:last-child:before {
    left: auto;
    max-width: calc(50% + .0625em);
    right: calc(50% - .03125em)
}

.jorg-tf-tree li li:only-child:before {
    display: none
}

.jorg-tf-tree li li:only-child>.jorg-tf-nc:before,
.jorg-tf-tree li li:only-child>.tf-node-content:before {
    height: 1.0625em;
    top: -1.0625em
}

.jorg-tf-tree .jorg-tf-nc,
.jorg-tf-tree .tf-node-content {
    border: 3.5px...

JavaScript

var jSuites = {};

jSuites.organogram = (function(el, options) {
    if (el.organogram) {
        return obj.setOptions(options);
    }

    var obj = {};
    obj.options = {};

    // Defines the state to deal with mouse events 
    var state = {
        x: 0,
        y: 0,
        initialWidth: 0,
        initialTop: 100,
        origin: {
            x: 0,
            y: 0,
        },
        fingerDistance: 0,
        mobileDown: false,
        scaling: false,
        zoom: 1
    }

    var getRoleById = function(id) {
       for (var i = 0; i < obj.options.roles.length; i++) {
           if (id == obj.options.roles[i].id) {
               return obj.options.roles[i];
           }
       }
       return false;
    }

    var getContent = function(node) {
        var role = node.role;
        var color = node.color || 'lightgreen';
        if (obj.options.roles && node.role >= 0) {
            var o = getRoleById(node.role);
            if (o) {
                role = o.name;
                var color = o.color;
            }
        }

        return `<div class="jorg-user-status" style="background:${color}"></div>
            <div class="jorg-user-info">
                <div class='jorg-user-img'><img src="${node.img}" ondragstart="return false" /></div>
                <div class='jorg-user-content'><span>${node.name}</span><span>${role}</span></div>
            </div>`;
    }

    // Creates the shape of a node to be added to the organogram chart tree
    var mountNodes = function(node, container) {
        var li = document.createElement('li');
        var span = document.createElement('span');
        span.className = 'jorg-tf-nc';
        span.innerHTML = getContent(node);
        span.setAttribute('id', node.id);
        var ul = document.createElement('ul');
        li.appendChild(span);
        li.appendChild(ul);
        container.appendChild(li);

        return ul;
    }

    // Return the render mode ( vertical or horizontal )
    var...