JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-nav-wrap wrapper">
<nav class="main-nav inner-el container">
				<ul>
					<li>
						<a href="" title="">menu</a>
						<span class="icon icon-dotted-sep col"></span>
						<ul>
							<li>
								<a href="" title="">sub item</a>
								<ul>
									<li><a href="" title="">sub item</a></li>
									<li><a href="" title="">sub item</a></li>
									<li><a href="" title="">sub item</a></li>
									<li><a href="" title="">sub item</a></li>
									<li><a href="" title="">sub item</a></li>
								</ul>
							</li>
							<li><a href="" title="">sub item</a></li>
							<li><a href="" title="">sub item</a></li>
						</ul>
					</li>
				</ul>
			</nav>
</div>

CSS

* {
    padding:0;
    margin:0;
    list-style:none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.main-nav-wrap{
  background-color:#fff;
  -webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);
	 -moz-box-shadow:0 0 15px rgba(0,0,0,0.2);
		  box-shadow:0 0 15px rgba(0,0,0,0.2);
}

.main-nav{
  height:60px;
  padding:0 10px;
}

.main-nav > ul > li {
  float:right;
  font:13px yekan;
  padding:9px 0px;
  height:60px;
  margin-left:-5px;
}

.main-nav > ul > li .icon {
  -webkit-transition: all 100ms ease-in-out;
	 -moz-transition: all 100ms ease-in-out;
	  -ms-transition: all 100ms ease-in-out;
	   -o-transition: all 100ms ease-in-out;
		  transition: all 100ms ease-in-out;
}

.main-nav > ul > li:hover{
  background-color:#EDEDED;
}

.main-nav > ul > li:hover .icon {
  visibility:hidden;
}

.main-nav > ul > li:first-child{
  font-size:16px;
  background: #4AC47B;
  margin-left:0px;
  background: -moz-linear-gradient(top, #4AC47B 50%, #3EB66E 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#4AC47B), color-stop(50%,#3EB66E));
  background: -webkit-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -o-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -ms-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: linear-gradient(to bottom, #4AC47B 50%,#3EB66E 50%);
}

.main-nav > ul > li:first-child .livicon {
  margin-left:4px;
}

.main-nav > ul > li > a{
  padding:9px 35px;
  float:right;
  color:#7f7f7f;
  height:100%;
}

.main-nav > ul > li:first-child > a{
  font-size:16px;
  padding:8px 33px;
  color:#fff;
}

.main-nav > ul > li:first-child .icon {
  display:none;
}

.main-nav ul li{
  position:relative;
    z-index:200;
  -webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all...