JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="irp-subnav" class="css-sticky" role="navigation" aria-label="irp-subnav" lang="de-DE">
   <div class="irp-wrapper">
        <div class="irp-background"></div>
        <div class="irp-content">
            <span class="irp-title">
                  TITLE</span>
            <div class="irp-menu">
            <div class="irp-menu-tray">
                <ul class="irp-menu-items">
                  <li class="irp-menu-item"><a href="/LINK-1/" class="irp-menu-link">LINK 1</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK2/" class="irp-menu-link">LINK 2</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK3/" class="irp-menu-link">LINK3</a>
                </ul>
            </div>
            <div class="irp-actions irp-actions-right">
                <div class="irp-action irp-action-menucta" aria-hidden="true">

                    <label for="irp-menustate" class="irp-menucta"> <span class="irp-menucta-chevron"></span>
                            </label>
                </div>
            </div>
        </div>
        </div>
    </div>
</nav>

CSS

li.active{
  background: #BB0000;
}

JavaScript

jQuery(document).ready(function($) {

var url = window.location.pathname; 
var activePage = "https://fiddle.jshell.net/LINK2/"; 
    $('.irp-menu-item .irp-menu-link').each(function () { 
        var linkPage = this.href.substring(0,this.href.lastIndexOf('/')+1);				
        if (activePage == linkPage) {        
            $(this).parent("li").addClass("active"); 
        }
    });

});