JSFiddle - React, Tailwind, and code Playground

by Julien Roy

HTML

<ul class="k-group k-treeview-lines" role="group">
    <li role="treeitem" class="k-item k-first k-last" data-uid="1e833669-680c-47fc-9bfa-c01095149c11">
        <div class="k-top k-bot ng-scope"><span class="k-icon k-minus" role="presentation"></span>
            <span class="k-in"><img class="k-image" alt="" src="common/images/view-project/site-icon.jpg">Site Stevens Point</span>
            </div>
            <ul class="k-group" role="group" style="display: block;"><li role="treeitem" class="k-item" data-uid="cc39128e-f5f3-4ba0-be37-954020fbfcb5" data-expanded="true" aria-expanded="true"><div class="ng-scope k-top"><span class="k-icon k-minus" role="presentation"></span><span class="k-in"><img class="k-image" alt="" src="common/images/view-project/building-icon.jpg">Ben Franklin</span></div><ul class="k-group" style="display: block; overflow: visible; height: auto;" role="group"><li role="treeitem" class="k-item" data-uid="a5880734-c50f-4579-b8fa-34fc31d9e1ac" data-expanded="true" aria-expanded="true"><div class="ng-scope k-top"><span class="k-icon k-minus" role="presentation"></span><span class="k-in"><img class="k-image" alt="" src="common/images/view-project/site-icon.jpg">Basement</span></div><ul class="k-group" style="display: block; overflow: visible; height: auto;" role="group"><li role="treeitem" class="k-item k-last" data-uid="f622e73e-a2d6-4d84-b787-d5649389c0ac" aria-expanded="true" data-expanded="true"><div class="ng-scope k-bot"><span class="k-icon k-minus" role="presentation"></span><span class="k-in"><img class="k-image" alt="" src="common/images/view-project/site-icon.jpg">Mechanical room BF</span></div><ul class="k-group" style="display: block; overflow: visible; height: auto;" role="group"><li role="treeitem" class="k-item" data-uid="ed125cbc-6dc2-4e20-8bef-3597a132dd17"><div class="k-top ng-scope"><span class="k-in"><img class="k-image" alt="" src="common/images/view-project/equipment-icon.jpg">Chiller</span></div></li><li role="treeitem"...

CSS

ul {  
    padding-left : 0px;
    border : 1px solid grey;  
}

ul ul {
    border-width : 0;   
}

li {
    list-style : none;
}

ul ul li div {  
    padding-left : 10px;
}

ul ul ul li div{  
    padding-left : 20px;
}

ul ul ul ul li div{  
    padding-left : 30px;
}

ul ul ul ul ul li div{  
    padding-left : 40px;
}

li div {
 padding : 0 0 0 5px;
 border-bottom : 1px solid grey;   
}