JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<body class="bg-wp">
  <div id="content">
    <div class="cover">
      <h2>Title</h2>
      <p class="keep-scrolling">Keep scrolling along</p>
    </div>
    <section class="stats">
      <article id="bg-1">
        /* stuff */
      </article>
      <article id="bg-2">
        /* stuff */
      </article>
      <article id="bg-3">
        /* stuff */
      </article>
      <article id="bg-4">
        /* stuff */
      </article>
    </section>
  </div>
</body>

CSS

article {
  height: 200px;
}

JavaScript

$(function() {
  $("article").waypoint({
    handler: function(direction) {
      $("body").removeClass(function(index, css) {
        return (css.match(/(^|\s)bg-\S+/g) || []).join(' ');
      });
      $("body").addClass(this.element.id);
    }
  });
});