JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="blah" class="wpcf7">
    Junk data
  </div>
</div>
<a href="" id="switch">Update Class</a>

CSS

.invalid {color: #fff;}

JavaScript

$(document).ready(function() {

  $('#switch').click(function(e) {
    $('.wpcf7').addClass('invalid');
    e.preventDefault();

  });
});

var element = $('.wpcf7').get(0);

var observer = new WebKitMutationObserver(function(mutations) {
  mutations.forEach(attrModified);
});
observer.observe(element, {
  attributes: true,
  subtree: false
});

function attrModified(mutation) {
  el = $(mutation.target);
  if (el.hasClass('invalid') && el.hasClass('wpcf7')) {
    alert('Invalid');
  }
}