JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="flex">
  <div>
    <h1>
      DESI<br>GNER
    </h1>
    <p>
      No need to worry about your ranking on Google and other search engines. Massive Dynamic is a SEO optimized WordPress theme and control how your websites are displayed in search results.Massive Dynamic is a fully responsive theme. Smartphone.
    </p>
  </div>

  <div class="rellax" data-rellax-speed="5">
    <img src="http://via.placeholder.com/250x460" alt="">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 100px;
}

body {
  height: 2000px;
}

JavaScript

(function(n, h) {
  "function" === typeof define && define.amd ? define([], h) : "object" === typeof module && module.exports ? module.exports = h() : n.Rellax = h()
})("undefined" !== typeof window ? window : global, function() {
  var n = function(h, p) {
    var a = Object.create(n.prototype),
      l = 0,
      r = 0,
      k = 0,
      t = 0,
      c = [],
      u = !0,
      B = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(a) {
        return setTimeout(a, 1E3 / 60)
      },
      q = null,
      C = window.cancelAnimationFrame ||
      window.mozCancelAnimationFrame || clearTimeout,
      D = window.transformProp || function() {
        var a = document.createElement("div");
        if (null === a.style.transform) {
          var b = ["Webkit", "Moz", "ms"],
            e;
          for (e in b)
            if (void 0 !== a.style[b[e] + "Transform"]) return b[e] + "Transform"
        }
        return "transform"
      }();
    a.options = {
      speed: -2,
      center: !1,
      wrapper: null,
      relativeToWrapper: !1,
      round: !0,
      vertical: !0,
      horizontal: !1,
      callback: function() {}
    };
    p && Object.keys(p).forEach(function(d) {
      a.options[d] = p[d]
    });
    h || (h = ".rellax");
    var m = "string" === typeof h ? document.querySelectorAll(h) : [h];
    if (0 < m.length) {
      a.elems = m;
      if (a.options.wrapper && !a.options.wrapper.nodeType)
        if (m = document.querySelector(a.options.wrapper)) a.options.wrapper = m;
        else {
          console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
          return
        }
      var w = function() {
          for (var d = 0; d < c.length; d++) a.elems[d].style.cssText = c[d].style;
          c = [];
          r = window.innerHeight;
          t = window.innerWidth;
          x();
          for (d =...