JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class="tree">
<ul>

</ul>
</div>

CSS

* {margin: 0; padding: 0;}

.tree ul {
	padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}



.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}


.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}


.tree li:only-child{ padding-top: 0;}


.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}

.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}


.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}
.tree li a span{
	position: relative;
	top: -5px;
	left: 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 80px;
}
.tree li a img{
width:20px;
height:20px;
}
.tree li a:hover span{
	
top: -50px;
	
left: 2px;
}
.tree li a:hover img{
width:120px;
height:120px;
}
.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	display: inline-block;
}

.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.tree li a:hover+ul...

JavaScript

function Node(data) {
    this.data = data;
    this.parent = null;
    this.children = [];
}
 
function Tree(data,classe) {
    var node = new Node(data);
    this._root = node;
	this._base = document.querySelector(classe);
}
 
Tree.prototype.traverseDF = function(callback) {
 

    (function recurse(currentNode) {
  
        for (var i = 0, length = currentNode.children.length; i < length; i++) {
           
            recurse(currentNode.children[i]);
        }
 
   
        callback(currentNode);
 
   
    })(this._root);
 
};
 
Tree.prototype.traverseBF = function(callback) {
    var queue = new Queue();
 
    queue.enqueue(this._root);
 
    currentTree = queue.dequeue();
 
    while(currentTree){
        for (var i = 0, length = currentTree.children.length; i < length; i++) {
            queue.enqueue(currentTree.children[i]);
        }
 
        callback(currentTree);
        currentTree = queue.dequeue();
	
    }
};
 
Tree.prototype.contains = function(callback, traversal) {
    traversal.call(this, callback);
};
 
Tree.prototype.add = function(data, toData, traversal) {
    var child = new Node(data),
        parent = null,
        callback = function(node) {
	
            if (node.data === toData) {
                parent = node;
            }
        };
 
    this.contains(callback, traversal);

    if (parent) {
        parent.children.push(child);
        child.parent = parent;
			
    } else {
        throw new Error('Cannot add node to a non-existent parent.');
    }
	
};
 
Tree.prototype.remove = function(data, fromData, traversal) {
    var tree = this,
        parent = null,
        childToRemove = null,
        index;
 
    var callback = function(node) {
        if (node.data === fromData) {
            parent = node;
        }
    };
 
    this.contains(callback, traversal);
 
    if (parent) {
        index = findIndex(parent.children, data);
 
        if (index === undefined) {
            throw new Error('Parent nao Existente');
       ...