JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav" class="nav">
  <li class="current"><a href="index.html">Home</a></li>
  <li class="has-children"><a href="#">Dropdown</a>
    <ul>
      <li><a href="#">Submenu 01</a></li>
      <li><a href="#">Submenu 02</a></li>
      <li><a href="#">Submenu 03</a></li>
    </ul>
  </li>
  <li><a href="demo.html">Demo</a></li>
  <li><a href="archives.html">Archives</a></li>
  <li class="has-children"><a href="single.html">Blog</a>
    <ul>
      <li><a href="blog.html">Blog Entries</a></li>
      <li class="active current-menu-item"><a href="single.html">Single Blog</a></li>
    </ul>
  </li>
  <li><a href="page.html">Page</a></li>
</ul>
<!-- end #nav -->

CSS

.current>a {
       color: red;
     }

JavaScript

jQuery(function() {
  jQuery('#nav li').removeClass('current');
  jQuery('#nav>li.current-menu-item').addClass('current');
  jQuery('.has-children li.current-menu-item').closest('.has-children').addClass('current');
});