JSFiddle - React, Tailwind, and code Playground

JavaScript

var isElementInViewport = function(element) {
  if (typeof $ !== 'undefined' && element instanceof $) {
    element = element.get(0);
  }

  if (element === null) {
    return false;
  }

  var rect = element.getBoundingClientRect();
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
  var windowWidth = window.innerWidth || document.documentElement.clientWidth;

  return ((rect.left >= 0)
    && (rect.top >= 0)
    && ((rect.left + rect.width) <= windowWidth)
    && ((rect.top + rect.height) <= windowHeight)
  );
};

var isElementPartiallyInViewport = function(element) {
  if (typeof $ !== 'undefined' && element instanceof $) {
    element = element.get(0);
  }

  if (element === null) {
    return false;
  }

  var rect = element.getBoundingClientRect();
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
  var windowWidth = window.innerWidth || document.documentElement.clientWidth;

  var inViewX = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
  var inViewY = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);

  return (inViewY && inViewX);
};