JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav1" class="navigation">
    <li class="navigation__active"><a href="#"><i class="zmdi zmdi-home"></i> Home</a></li>

    <li class="navigation__sub">
        <a href="#"><i class="zmdi zmdi-view-week"></i> About</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
<ul>

CSS

.navigation__active>a, .navigation__sub--active>a {
    color: red;
}

JavaScript

$(function(){
$( '#nav1' ).click(function (e) {
	$(this).children().each(function(){
  	$(this).removeClass('navigation__active');
  });
	$('#nav1 .navigation__sub' ).find( 'li.navigation__active').removeClass( 'navigation__active' );
	$(e.target).parent( 'li' ).addClass( 'navigation__active' );
});
});