JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

<div class="tree">
    <ul>
        <li>
            Parent
            <ul>
                <li>
                	 Child
                    <ul>
                        <li>
	                        Grand Child
                        </li>
                    </ul>
                </li>
                <li>
                	 Child
                    <ul>
                        <li>
	                        Grand Child
                        </li>
                        <li>
                        	 Grand Child
                            <ul>
                                <li>
	                                Great Grand Child
		                            <ul>
		                                <li>
			                               Great great Grand Child
		                                </li>
		                             </ul>
                                </li>
                                <li>
	                                Great Grand Child
                                </li>
                                <li>
	                              Great Grand Child
                                </li>
                            </ul>
                        </li>
                        <li>
	                      Grand Child
                        </li>
                    </ul>
                </li>
                <li>
                  With(+)
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px;
   
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px;
    
}

.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}