JSFiddle - React, Tailwind, and code Playground

HTML

<!-- MainMenu -->
<ul class="main-menu">
    <li><a href="About/xxxxx">About</a></li>    
    <li><a href="Services/xxxxx">Services</a></li>
    <li><a href="Portfolio/xxxxx">Portfolio</a></li>
</ul>
<!-- /MainMenu -->



<!-- MainMenu -->
<ul class="sub-menu">
    <li><a href="xxxxx/subpage1.html">About Main</a></li>    
    <li><a href="xxxxx/subpage2.html">About Main</a></li> 
    <li><a href="xxxxx/subpage3.html">About Main</a></li> 
</ul>
<!-- /MainMenu -->

CSS

body, html { background: #eeeeee;}

ul.main-menu { margin-bottom: 50px; overflow: auto; border-bottom: 2px solid #fff; display: block}
ul.main-menu li { display: inline; float: left; margin-right: 5px; }
ul.main-menu li a { font-size: 12px; text-decoration: none; color: #444;}

ul.main-menu li a.active { color: red; }

ul.submenu { overflow: auto; border-bottom: 2px solid #fff; display: block}
ul.sub-menu li { display: block; margin-right: 5px; }
ul.sub-menu li a { font-size: 12px; text-decoration: none; color: #444;}

ul.sub-menu li a.active { color: red; }

JavaScript

$(document).ready(function() {

    urlParts = "www.website.com/About/subpage1.html".split("/")
    var MainMenu = urlParts[1]+"/"; // mainmenu e.g About/XXXX
    var SubMenu = urlParts[2];      //submenu e.g XXXX/subpage1.html
    
    $('.main-menu > li > a[href^="'+MainMenu+'"], .sub-menu > li > a[href$="'+SubMenu+'"]').addClass('active');

});