JSFiddle - React, Tailwind, and code Playground

HTML

<body id="home">         
<div id="split-container">
  <div class="split-top">
    <div class="container-s">
      <div class="row">
        <div class="col-12">
          <h1 class="center offwhite">Paragraph A</h1>
        </div>
      </div>
    </div>
  </div>    
  <div class="split-bottom invert-trigger">
    <div class="container-s">
      <div class="row">
        <div class="col-12">
          <h1 class="center offblack">Paragraph B</h1>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* PAGE ELEMENTS */

.body-content {
  padding: 0 0 68px 0;
  position: relative;
  z-index: 0 !important;
}

#home {
  background-color: #191919;
  background: url(https://images.pexels.com/photos/149988/pexels-photo-149988.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
  background-size: cover;
  transition: all 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#home.white{
  background-color: white;
  background: url(https://images.pexels.com/photos/19670/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
  background-size: cover;
}

#home .container {
  padding: 0px;
  width: 75%;
}

#home .row [class^="col"] {
  margin: 0px;
}

#home #split-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.split-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50%;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.split-bottom {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center;
}

.invert {
transition: all 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}


/* COLORS */


.white {
  color: #fff;
}

.offwhite {
  color: #F2F2F2;
}

.black {
  color: #000;
}

.offblack {
  color: #191919;
}

.grey {
    color: #a9a9a9;
}

.darkgrey {
    color: #444444;
}

.body-content.lighter {
  background: #fff;
}

.body-content.darker {
  background: #f5f5f5;
}

JavaScript

$(document).ready(function() {
    if($(window).width() >= 752) {
        $('.invert-trigger').on('mouseover', function() { // One .mouseover() event
            $('body').addClass('white');
            $('.invert').addClass('black');
        }).on('mouseout', function() {  // One .mouseout() event
            $('body').removeClass('white');
            $('.invert').removeClass('black');
        });
    }
});