JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a></li>
            <li>
                <a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a></li>
        </ul>
    </li>
</ul>

CSS

a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding-left: 1em;
    line-height: 2em;
}
li li {
    margin-left: -1em;
    padding-left: 2em;
    border-bottom: none;
}
li li li {
    margin-left: -2em;
    padding-left: 3em;
    border-bottom: none;
}