JSFiddle - React, Tailwind, and code Playground

by Jason

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<ul>
	<li><button aria-controls="submenu-771" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Products</span></button>
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-771">
	<li class="expanded menu-mlid-771">
		<a href="/dev/products">Products</a>
	</li>
	<li class="first leaf menu-mlid-776">
		<a href="/dev/content/imagery">Imagery</a>
	</li>
	<li class="last leaf menu-mlid-775">
		<a href="/dev/content/web-data-services">Web Data Services</a>
	</li>
</ul>
</li>
	<li><button aria-controls="submenu-773" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Services</span></button>
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-773">
	<li class="expanded active-trail active menu-mlid-773">
		<a class="active-trail active" href="/dev/page/services">Services</a>
	</li>
	<li class="first leaf active-trail active menu-mlid-956">
		<a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a>
	</li>
	<li class="leaf active menu-mlid-953">
		<a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a>
	</li>
	<li class="leaf active menu-mlid-777">
		<a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a>
	</li>
	<li class="last leaf active menu-mlid-955">
		<a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a>
	</li>
</ul>
</li>

CSS

.bold{
  font-weight:bold;
  font-size:22px;
}

JavaScript

if(jQuery("button.usa-nav-link").siblings("ul").find(".active")){
     jQuery("button.usa-nav-link").children("span").addClass("bold");
};