JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item
            <ul>
                <li>First Item</li>
                <li>Second Item</li>
                <li>Third Item</li>
            </ul>
        </li>
    </ul>
</div>

CSS

div > ul > li {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
}

div > ul > li > ul {
    list-style-type: none;
}

div > ul > li > ul > li:nth-of-type(2) {
    text-indent: 20px;
}

div > ul > li > ul > li:nth-of-type(3) {
    text-indent: 40px;
}

/* For arrows */

div > ul > li:after {
    content: "»";
    position: relative;
    right: -20px;
}

div > ul > li > ul > li:before {
    content: "»";
    left: -5px;
    position: relative;
}

div > ul > li:last-child:after {
    content: "";
}