JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
       <li class="current-menu-item"><a href="index.html">Home</a>   
					<ul class="submenu">
             <li class="submenu-menu-item"><a href="page-full.html">full</a></li>
             <li class="submenu-menu-item"><a href="page-features.html">featurs</a></li>
             <li class="submenu-menu-item"><a href="page-typographydssd.html">typography</a></li>
          </ul>
        </li>  
        
       <li class="current-menu-item"><a href="page.html">menu-2</a>
          <ul class="submenu">
             <li class="submenu-menu-item"><a href="page-fulls.html">full</a></li>
             <li class="submenu-menu-item"><a href="page-features.html">featurs</a></li>
             <li class="submenu-menu-item"><a href="page-typography.html">typography</a></li>
          </ul>
       </li>
</ul>

CSS

.active > a {
	color: green;
  display: block;
}

JavaScript

var pathname_url = 'page-typography.html';
  var href_url = 'page-typography.html';

  $("li").each(function() {
    var link = $(this).find("a").attr("href");
    if (link == pathname_url || link ===  href_url) {
      $(this).addClass("active").closest('.current-menu-item').addClass('active');
    }
  });