JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ul>
    </li>
</ul>

CSS

body {
    font-family: sans-serif;
}
li {
    padding: 4px;
}
li:hover {
    background: #f7f7f7;
    cursor: pointer;
}