JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Tutorial website: http://jasongraphix.com/journal/merry-nested-list/
Stackoverflow answer by arttronics for SO Question: http://stackoverflow.com/q/14034861/1195891
-->
<ul id="nestedlist">
    <li><a href="#">Gadgets and Gizmos</a>
    <ul>
        <li><a href="#">Gadgets</a>
        <ul>
            <li><a href="#">Inspector Gadget </a></li>
            <li><a href="#">Gadget Hackwrench</a></li>
            <li><a href="#">Gadget Galaxy</a></li>
            <li><a href="#">Daily Gadget </a></li>
            <li><a href="#">Cheese Gadgets</a>
            <ul>
                <li><a href="#">Bleu</a></li>
                <li><a href="#">Swiss</a></li>
                <li><a href="#">Havardi</a></li>
            </ul>
            </li>
        </ul>
        </li>
        <li><a href="#">Gizmos</a>
        <ul>
            <li><a href="#">Gizmo the Mogwai</a></li>
            <li><a href="#">The Transform Gizmo</a></li>
            <li><a href="#">Gizmondo</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

CSS

#nestedlist, #nestedlist ul {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  list-style-type: none;
  margin-left:0;
  padding-left:30px;
  text-indent: -4px;
}

/* UL Layer 1 Rules */
#nestedlist {
  list-style-image:url(http://placehold.it/5x15/ff0000);
  font-size: 20px;
  font-weight:bold;
}

/* UL Layer 2 Rules */
#nestedlist ul {
  list-style-image:url(http://placehold.it/5x15/00ff00);
  font-size: 18px;
  font-weight: normal;
  margin-top: 3px;
}

/* UL Layer 3 Rules */
#nestedlist ul ul {
  list-style-image:url(http://placehold.it/5x15/0000ff);
  font-size: 16px;
}

/* UL 4 Rules */
#nestedlist ul ul ul {
  list-style-image:url(http://placehold.it/5x15/ffff00);
  font-size: 14px;
}