JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="clearfix" id="topnav">
  <li class="mainNavFirst"><a href="/">Our Home</a></li> <!-- bold this 'our' -->
  <li class="mainNavMiddle"><a href="#">Lorem Ipsum</a><!-- bold this 'Lorem' -->
    <div>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
        <li><a href="#">Just a random link</a></li>
        <li><a href="#">Just a random link</a></li>
      </ul>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
      </ul>
    </div>
  </li>
  <li class="mainNavLast"><a href="#">Another Link</a></li><!-- bold this 'Another' -->
</ul>

CSS

#topnav > li > a span
{
    font-weight: 800;
}

JavaScript

$(function(){
      $('#topnav > li > a').each(function(item, index){
            var firstWord = $(this).text().split(" ")[0];
            var newText = $(this).text().replace(firstWord, "<span>"+firstWord +"</span>");
            $(this).html(newText);
      });
    });