JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tree">
    <ul>
        <li>	<a href="#">Sibia</a>

            <ul>
                <li>	<a href="#">Analytics</a>

                    <ul>
                        <li>	<a href="#">Soumita</a>

                        </li>
                        <li>	<a href="#">Relina</a>

                        </li>
                        <li>	<a href="#">Sayan</a>

                        </li>
                    </ul>
                </li>
                <li>	<a href="#">IT</a>

                    <ul>
                        <li><a href="#">.NET</a>

                            <ul>
                                <li> <a href="#">Utpal</a>

                                </li>
                                <li> <a href="#">Arka</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Node.JS</a>

                            <ul>
                                <li> <a href="#">Atrayee</a>

                                </li>
                            </ul>
                        </li>
                        <li>	<a href="#">Python</a>

                            <ul>
                                <li>	<a href="#">Sankar</a>

                                </li>
                                <li>	<a href="#">Sayak</a>

                                </li>
                                <li>	<a href="#">Kuntal</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </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 {
     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;
 }
 .tree li a:hover, .tree li a:hover+ul li a {
     background: #c8e4f8;
     color: #000;
     border: 1px solid #94a0b4;
 }
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li...

JavaScript

/* nothing here to view.
 Go to HTML and CSS portion to view the result */