JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a>A</a>
        <ul>
            <li><a>A.A</a></li>
            <li><a>A.B</a></li>
            <li><a>A.C</a>
                <ul>
                    <li><a>A.C.A</a></li>
                    <li><a>A.C.B</a></li>
                    <li><a>A.C.C</a></li>
                </ul>
            </li>
        </ul>
        <li><a>A.D</a></li>
    </li>
    <li><a>B</a></li>
</ul>

CSS

ul {
    border-left:1px solid black;
    margin-left: 20px;
    padding-top:1px;
}

ul li {
    margin-top:20px;
    clear:both;
    border-top:1px solid black;
    
}
ul li a {
    display:block;
    margin-top: -10px;
    margin-bottom:-10px;
    background-color: white;
    margin-left: 10px;
    float:left;
    width:100%;
    height:20px;
    padding: 2px;
}