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 class="connect"><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; Not used due to class .connect below */
}

/* UL Layer 1 Rules */
#nestedlist {
  font-size: 20px;
  font-weight:bold;
}

/* UL Layer 2 Rules */
#nestedlist ul {
  font-size: 18px;
  font-weight: normal;
  margin-top: 3px;
}

/* UL Layer 3 Rules */
#nestedlist ul ul {
  font-size: 16px;
}

/* UL 4 Rules */
#nestedlist ul ul ul {
  font-size: 14px;
}


ul li a {
  text-decoration: none;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
}

.connect {
  border-left: 1px solid black;
}

JavaScript

// This jQuery will simple add a blank space via    &nbsp;    to each anchor to distance itself from the graphics. Alternately, you can manually add that escaped blank space above and not use jQuery.

$(document).ready(function() {

    $('ul li a').each(function(){
        $(this).prepend('&nbsp;');
    });

});