JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <ul>
  <li class="root">執行長
  <ul>
    <li>研發部
      <ul>
        <li>產品團隊
         <ul>
           <li>專案經理</li>
           <li>系統分析</li>
           <li>開發工程師</li>
         </ul>
         
        </li>
        <li>專案團隊
          <ul>
            <li>專案一部
              <ul>
                <li>PM</li>
                <li>RD</li>  
              </ul>
            </li>
            <li>專案二部
              <ul>
                <li>PM</li>
                <li>RD</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>訓練團隊
        </li>
      </ul>
    </li>
    <li>業務團隊</li>
  </ul>
  </li>
</ul>

SCSS

ul {
    margin: 0px 0px 0px 5px;
    list-style: none;
    line-height: 2em;
    font-family: Arial;

    li {
        font-size: 16px;
        position: relative;

        &:before {
            position: absolute;
            left: -15px;
            top: 0px;
            content: '';
            display: block;
            border-left: 1px solid #ddd;
            height: 1em;
            border-bottom: 1px solid #ddd;
            width: 10px;
        }

        &:after {
            position: absolute;
            left: -15px;
            bottom: -7px;
            content: '';
            display: block;
            border-left: 1px solid #ddd;
            height: 100%;
        }

        &.root {
            margin: 0px 0px 0px -5px;

            &:before {
                display: none;
            }

            &:after {
                display: none;
            }
        }


        &:last-child {
            &:after {
                display: none;
            }
        }
    }
}