JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeline">
  <div class="col">
    <a href="http://placehold.it/700x1024/333/f09" class="item loading" data-ajax="_modal-timeline.html">
      <span class="overlay valign">
            <span class="center info">
              Editorial <br>
              David Yurman
            </span><i></i>
      </span>
      <div class="img" data-src="http://gb.aldeia.biz/wp-content/uploads/2015/09/Lt024.jpg"></div><i></i>
    </a>
    <div class="item ano">
      <div class="label">
        <p>1997</p><i></i>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="item texto">
      <p><span class="quote"></span> The world is a more beautiful place when we hold good things in our hearts.”</p><i></i>
    </div>
    <a href="http://placehold.it/700x1024/333/f09" class="item loading" data-ajax="_modal-timeline.html">
      <span class="overlay valign">
            <span class="center info">
              Editorial <br>
              David Yurman
            </span><i></i>
      </span>
      <div class="img" data-src="http://gb.aldeia.biz/wp-content/uploads/2015/09/Lt024.jpg"></div><i></i>
    </a>
  </div>
  <div class="col">
    <a href="http://placehold.it/700x1024/333/f09" class="item loading" data-ajax="_modal-timeline.html">
      <span class="overlay valign">
            <span class="center info">
              Editorial <br>
              David Yurman
            </span><i></i>
      </span>
      <div class="img" data-src="http://gb.aldeia.biz/wp-content/uploads/2015/09/Lt024.jpg"></div><i></i>
    </a>
    <a href="http://placehold.it/700x1024/333/f09" class="item loading" data-ajax="_modal-timeline.html">
      <div class="img" data-src="http://gb.aldeia.biz/wp-content/uploads/2015/09/Lt024.jpg"></div><i></i>
    </a>
  </div>
  <div class="col">
    <div class="item ano">
      <div class="label">
        <p>1998</p><i></i>
      </div>
    </div>
    <div class="item loading">
      <div class="img"...

SCSS

.timeline {
  position: relative;
  white-space: nowrap;
  font-size: 0;
  float: left;
  margin-top: -48vh;

  padding-left: 80px;
  padding-right: 80px;

}

.timeline .col {
  width: 33.78vh;
  height: 96vh;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}


/*.timeline .item {
  display: block;
  width: 100%;
  height: 50%;
  margin: 0;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}*/

/*.timeline .row-top,
.timeline .row-bottom {
  height: 48vh;
  position: relative;
}*/

.timeline .item {
  display: block;
  position: relative;
  /*background: #1F1F26;*/
  background: #FFF;
  /*width: 350px;*/
  /*width: 33.78vh;*/
  /*height: 100%;*/
  width: 100%;
  height: 50%;
  text-align: center;
  overflow: hidden;
  /*margin: 0 -105px;
  -webkit-transform: translateZ(0) scale(0.4);
      -ms-transform: translateZ(0) scale(0.4);
       -o-transform: translateZ(0) scale(0.4);
          transform: translateZ(0) scale(0.4);
  -webkit-transform-origin: 50% 0;
     -moz-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
       -o-transform-origin: 50% 0;
          transform-origin: 50% 0;*/
}

.timeline .item p,
.timeline .item i {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

.timeline .item i {
  height: 100%;
}

.timeline .item p {
  vertical-align: bottom;
}

.timeline .item + .item p {
  vertical-align: top;
}

.timeline .item img,
.timeline .item .img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  -webkit-transition: opacity .4s;
          transition: opacity .4s;
}

.timeline .item .img {
  /*display: block;
  width: 100%;
  height: 100%;*/
  height: 100%;
  background-color: #F0F0F0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
          background-size:...

JavaScript

/*!
  hey, [be]Lazy.js - v1.5.2 - 2015.12.01
  A lazy loading and multi-serving image script
  (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
*/
;
(function(root, blazy) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register bLazy as an anonymous module
        define(blazy);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = blazy();
    } else {
        // Browser globals. Register bLazy on window
        root.Blazy = blazy();
    }
})(this, function() {
    'use strict';

    //private vars
    var source, viewport, isRetina;

    // constructor
    return function Blazy(options) {
        //IE7- fallback for missing querySelectorAll support
        if (!document.querySelectorAll) {
            var s = document.createStyleSheet();
            document.querySelectorAll = function(r, c, i, j, a) {
                a = document.all, c = [], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
                for (i = r.length; i--;) {
                    s.addRule(r[i], 'k:v');
                    for (j = a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
                    s.removeRule(0);
                }
                return c;
            };
        }

        //options and helper vars
        var scope = this;
        var util = scope._util = {};
        util.elements = [];
        util.destroyed = true;
        scope.options = options || {};
        scope.options.error = scope.options.error || false;
        scope.options.offset = scope.options.offset || 100;
        scope.options.success = scope.options.success || false;
        scope.options.selector = scope.options.selector || '.b-lazy';
        scope.options.separator = scope.options.separator || '|';
        scope.options.container = scope.options.container ?...