JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<ul class="list">
  <li>
     <div class="item">
       <div class="connectors">
         <div class="top"></div>
         <div class="bottom"></div>
       </div>
       <div class="icon"><i class="fas fa-plus-square"></i></div>
       <div class="text">Item 1</div>
     </div>
     <div class="nested">
       <ul class="list">
         <li>
           <div class="item">
             <div class="connectors">
               <div class="top"></div>
               <div class="bottom"></div>
             </div>
             <div class="icon"><i class="fas fa-plus-square"></i></div>
             <div class="text">Child item 1</div>
           </div>
           <div class="nested">
             <ul class="list">
               <li>
                 <div class="item">
                   <div class="connectors">
                     <div class="top"></div>
                     <div class="bottom"></div>
                   </div>
                   <div class="icon"><i class="fas fa-plus-square"></i></div>
                   <div class="text">Grand child item 1</div>
                 </div>
               </li>
               <li>
                 <div class="item">
                   <div class="connectors">
                     <div class="top"></div>
                     <div class="bottom leaf"></div>
                   </div>
                   <div class="icon"><i class="fas fa-plus-square"></i></div>
                   <div class="text">Grand child item 1</div>
                 </div>
               </li>
             </ul>
           </div>
         </li>
       </ul>
     </div>
  </li>
  <li>
    <div class="item">
      <div class="connectors">
        <div class="top"></div>
        <div class="bottom leaf"></div>
      </div>
      <div class="icon"><i class="fas fa-plus-square"></i></div>
      <div class="text">Item 2</div>
    </div>
  </li>
</ul>

CSS

ul.list {
  margin-left: 25px;
  list-style: none;
}

.item {
  display: flex;
  height: 50px;
}

.nested {
  border-left: 1px solid grey;
}

.connectors {
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
}

.connectors > div {
  flex: 1 0 auto;
}

.top {
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
}

.bottom {
  border-left: 1px solid grey;
}
.bottom.leaf {
  border-left: none;
}

.icon {
  display: flex;
  align-items: flex-start;
  flex: 0 0 50px;
  font-size: 50px;
}

.text {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
}