JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <nav>
    <ul>
      <li class="active"><a href="#" >Home</a></li>
      <li><a href="#">Folio</a>
        <ul>
          <li><a href="#">Nature</a></li>
          <li><a href="#">People &raquo;</a>
            <ul>
              <li><a href="#">Men</a></li>              
	    </ul>
          </li>      
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS

#container
{
 margin:auto;
}
/*MAIN MENU*/
nav ul
{
 list-style:none;
 background-color:#2c3e50;
 border-radius:5px;
 padding:0 5px;
}
nav ul:after
{
 content:'.';
 clear:both;
 visibility:hidden;
 display:block;
 height:0px;
}

nav ul li
{
 float:left;
 position:relative;
 line-height:20px;
}
nav ul li a
{
 display:block;
 color:#fff;
 text-decoration:none;
 padding:14px 15px 15px;
 font-size:18px;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
nav ul li:hover > a
{
 color:#3498db;
}
nav ul li.active > a
{
 color:#2980b9;
}

/*SUB MENU*/

/*The little arrow on top of sub menu*/

nav ul li > ul:before
{
 content:"";
 border-style:solid;
 border-width:0 9px 9px 9px;
 border-color:transparent transparent #2c3e50 transparent;
 width:0;
 height:0;
 position:absolute;
 left:15px;
 top:5px
}

nav ul li > ul
{
 position:absolute;
 left:14px;
 top:80%;
 padding-top:13px;
 background:none;
 width:150px;
 z-index:-9999;
 opacity:0;
visibility: hidden;
 -webkit-transition:0.3s ease-out;
 -moz-transition:0.3s ease-out;
 -ms-transition:0.3s ease-out;
 -o-transition:0.3s ease-out;
 transition:0.3s ease-out;
}

nav ul li:hover > ul
{
 visibility: visible;
 display:block;
 z-index:100;
 opacity:1;
 top:95%;
}
nav ul li > ul li:first-child
{
 padding-top:3px;
 border-radius:4px 4px 0 0;
}
nav ul li > ul li:last-child
{
 border-radius:0 0 4px 4px;
}
nav ul li > ul li
{
 width:100%;
 background-color:#2c3e50;
 padding:0px 3px 3px;
}

nav ul li > ul li a
{
 display:block;
 padding:6px 9px;
 border-radius:2px;
 font-size:14px;
}
nav ul li > ul li:hover > a
{ 
 color:#fff;
 background:#3498db;
}
nav ul li > ul li.active > a
{ 
 color:#fff;
 background:#2980b9;
}

/*SUB SUB MENU*/
nav ul li > ul li > ul:before
{
 content:"";
 border-style:solid;
 border-width:0 9px 9px 9px;
 border-color:transparent transparent #2c3e50 transparent;
 width:0px;
...