JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<header id="header">
</header>
<section id="section1">
  <div>
  </div>
  <nav id="mainnav">
    <ul>
      <li>
        <a href="1.html"><b>1</b></a>
      </li>
      <li>
        <a href="2.html"><b>2</b></a>
      </li>
      <li>
        <a href="3.html"><b>3</b></a>
      </li>
    </ul>
  </nav>
</section>
<section id="section2">
  <div id="mainwrap">
    <div id="main">
    </div>
  </div>
</section>
</div>

JavaScript

$("#mainnav li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#main").load(href, function() {
        // do something after content has been loaded
    });
});