JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <nav id="container">
  <ul>
    <li>Text</li>
    <li>
      <ul>
        <li>Text</li>
        <li>
          <ul>
            <li>Text</li>
          </ul>
       </li>
      </ul>
    <li>
    <li>
      <ul>
        <li>Text</li>
        <li>
          <ul>
              <li>Text</li>
              <li>
                  <ul>
                     <li>Text</li>
                  </ul>
              </li>
          </ul>
       </li>
      </ul>
    <li>
  </ul>
</nav>
</ul>

CSS

#container ul{
    background: red;
}

#container ul ul{
    background: yellow;
}

#container ul ul ul{
    background: green;
}

#container ul ul ul ul{
    background: blue;
}