JSFiddle - React, Tailwind, and code Playground

by Nelson Feel

HTML

<div class="tree">
  <ul id="testing">
    <li parent-id=0 emp-id=1>Rao</li>
    <li parent-id=1 emp-id=2>Venkat</li>
    <li parent-id=2 emp-id=3>Ragava</li>
    <li parent-id=3 emp-id=4>Basha</li>
    <li parent-id=3 emp-id=5>Tester1</li>
    <li parent-id=5 emp-id=6>Tester1a</li>
    <li parent-id=5 emp-id=7>Tester1b</li>
  </ul>
  <ul id="development">
    <li parent-id=0 emp-id=8>Vengal</li>
    <li parent-id=8 emp-id=9>Naren</li>
    <li parent-id=9 emp-id=5>Tester1</li>
  </ul>
</div>

CSS

/*Now the 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;
}


/*We will use ::before and ::after to draw the connectors*/

.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;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

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


/*Remove space from the top of single children*/

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


/*Remove left connector from first child and 
right connector from last child*/

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


/*Adding back the vertical connector to the last nodes*/

.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;
}


/*Time to add downward connectors from parents*/

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

.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;
 ...

JavaScript

//First Project Tree Genrating
var $ul = $('ul');
$ul.find('li[parent-id]').each(function() {
  $ul.find('li[parent-id=' + $(this).attr('emp-id') + ']').wrapAll('<ul />').parent().appendTo(this)
});

$('ul#testing, ul#development').find('li[emp-id]').each(function(){
var testing = $(this).attr('emp-id');
})