JSFiddle - React, Tailwind, and code Playground

by Ezra

HTML

<nav id="main_nav">
  <ul role="tablist">
    <li><a href="#treadmills">Treadmills</a>

    </li>
    <li><a href="#cross-trainers">Cross Trainers</a>

    </li>
    <li><a href="#bikes">Bikes</a>

    </li>
    <li><a href="#rowing-machines">Rowing Machines</a>

    </li>
    <li><a href="#strength-equipment">Strength Equipment</a>

    </li>
    <li class="on has_children "><a href="#weights-and-bars" role="tab" aria-expanded="true" aria-selected="true"
      tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>Weights &amp; Bars</a>

      <ul
      role="tabpanel">
        <li class="on has_children"><a href="#weights-and-bars/bars">Bars</a>

          <ul>
            <li><a href="#weights-and-bars/bars/olympic-bars">Olympic Bars</a>

            </li>
            <li><a href="#weights-and-bars/bars/standard-bars">Standard Bars</a>

            </li>
            <li><a href="#weights-bars/bars/dumbbell-rods">Dumbbell Rods</a>

            </li>
          </ul>
        </li>
        <li><a href="#weights-and-bars/gym-attachments">Gym Attachments</a>

        </li>
        <li><a href="#weights-bars/weightdumbbell-sets">Weight &amp; Dumbbell Sets</a>

        </li>
        <li><a href="#weights-bars/standard-weight-plates">Standard Weight Plates</a>

        </li>
        <li><a href="#weights-bars/olympic-weight-plates">Olympic Weight Plates</a>

        </li>
        <li><a href="#weights-bars/kettlebells">Kettlebells</a>

        </li>
        <li><a href="#weights-bars/hex-dumbbells">Hex Dumbbells</a>

        </li>
        <li><a href="#weights-bars/neoprene-dumbbells">Neoprene Dumbbells</a>

        </li>
        <li><a href="#weights-bars/power-bags">Power Bags</a>

        </li>
        <li><a href="#weights-bars/weight-bar-stands">Weight &amp; Bar Stands</a>

        </li>
  </ul>
  </li>
  <li><a href="#crossfit-equipment">Crossfit Equipment</a>

  </li>
  <li><a href="#accessories">Accessories</a>

  </li>
  <li><a...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 170%;
}
/* NAVIGATION */
 #main_nav {
  float: left;
  text-align: left;
  width: 206px;
  padding-top: 47px;
  z-index:10
}

#main_nav ul {
  zoom:1;
  overflow:hidden;
  list-style:none
}
#main_nav ul:after {
  content:".";
  display:block;
  clear:both;
  height:0;
  visibility:hidden
}
#main_nav>ul {
  border: 0
}
#main_nav ul>li>a {
  outline: none;
  color: #fff;
  cursor: pointer;
  padding:8px 10px 8px 18px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color:#0096ce;
  display: block;
  border-bottom: solid 1px #26a6d5;
  text-transform: uppercase;
  text-decoration:none
}
#main_nav ul>li>a:hover {
  color: #e8e8e8;
  background-color:#0086b8
}
#main_nav .has_children>ul {
  padding:0 10px 0 0;
  background-color: #659700
}
#main_nav .has_children>ul li ul li:last-child {
  padding-bottom: 0
}
#main_nav .has_children>ul ul {
  background:none
}
/* get rid of top background on active sub menu */
 #main_nav .on.has_children a, #main_nav .on {
  background: #659700
}
#main_nav li li {
  padding: 0;
  margin-bottom: 7px
}
#main_nav li li:first-child {
  margin-top: 5px
}
#main_nav li li:last-child {
  padding-bottom: 5px
}
.snippet input {
  margin:15px 0 0 20px
}

#main_nav li li li {
  width:auto;
  padding: 0 15px
}
#main_nav li li a {
  font-size: 11px;
  padding:0px 10px 5px 18px;
  font-weight: bold;
  color: #d1e0b3;
  text-transform: uppercase;
  text-decoration: none;
  background:none;
  border: none;
  line-height:1.2
}
#main_nav li li a:hover {
  color: #fff;
  background:none;
  border: none
}
#main_nav li li.on a {
  color: #fff;
}
#main_nav li li.on li a {
  color: #D1E0B3 !important;
}
#main_nav li li.on li.on a {
  color: #fff !important;
}