JSFiddle - React, Tailwind, and code Playground

HTML

<!--first NAV-->
<nav>
    <ul class="showcase first">
    <li><a href="#" class="current">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    </ul>
</nav>

<!--second NAV-->
<nav>
  <ul>
      <li id="all">All</li>
      <li id="web">Web</li>
      <li id="print">Print</li>
      <li id="illustration">Illustration</li>
      <li id="logo">Logo</li>
 </ul>

            </nav>

CSS

/* fisrt nav definitions */
nav ul li a{
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
    color: black;
    text-transform:capitalize;
    font-weight:normal;
    display:block;  
    padding:15px;
    background-color:transparent;
    margin-top:0px;
    margin-right:6px;
    text-decoration:none;
}
nav ul li a:hover{
    background-color: #43AEF2;
    padding:15px;
    color:white;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

nav ul li a.current{
    background-color:#43aef2 ;
    padding:15px;
    color:white;
    -moz-border-radius: 8px;
    border-radius: 8px;
}


/*THIS IS OTHER NAV*/

nav ul:not(.first) {
    list-style: none;
    padding: 0;
    margin: 50px 0;
    text-align: center;
}
nav ul:not(.first) li {
    display: inline;
    cursor: pointer;
    margin-right: 10px;
    color: #666;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}
nav ul:not(.first) li:last-child {
    margin-right: 0;
}
nav ul:not(.first) li:hover {
    color: #000;
}
nav ul:not(.first) li:hover:after {
    color: #bbb;
}
nav ul:not(.first) li:after {
    margin-left: 10px;
    content: '/';
    color: #bbb;
}
nav ul:not(.first) li:last-child:after {
    content: '';
}

JavaScript

$("li").css('opacity', '0.40')
$(".selected").css('opacity', '1')

$('ul.showcase > li').hover(function () {
    $(this).stop().fadeTo(500, 1);
}, function () {
    $(this).not('.selected').stop().fadeTo(500, 0.40);
});