JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li>
                <a href="#">Item 1.1 Item 1.1.1 Item 1.1.1</a>
                <ul>
                    <li><a href="#">Item 1.1.1 Item 1.1.1 Item 1.1.1 Item 1.1.1</a></li>
                    <li><a href="#">Item 1.1.2</a></li>
                    <li><a href="#">Item 1.1.3</a></li>
                    <li><a href="#">Item 1.1.4</a></li>
                </ul>
            </li>
            <li><a href="#">Item 1.2 Item 1.1.1 Item 1.1.1 Item 1.1.1 </a></li>
            <li><a href="#">Item 1.3</a></li>
            <li><a href="#">Item 1.4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
        <ul>
            <li><a href="#">Item 4.1 Item 4.1 Item 4.1 Item 4.1</a></li>
            <li><a href="#">Item 4.2</a></li>
            <li><a href="#">Item 4.3</a></li>
        </ul>
    </li>
</ul>

CSS

.tree li ul {
    margin: 0 0 0 100px;
}
.tree ul li {
    width: 100px;        
}