JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.dropbox.com/s/uqngeqalispza1c/jquery.stellar.min.js?dl=1"></script>
<ul>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_0507-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_0507-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_0507-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
    </li>
    <li class="item">
        <div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_0507-1300x866.jpg"></div>
    </li>
</ul>

CSS

ul {
    list-style-type: none;
}
.item-image {
    border-bottom: 2px solid #000;
    width: 500px;
    height: 100px;
    overflow: hidden;
    background-position: 50% 0;
    background-size: cover;
}

JavaScript

$('.item-image').each(function () {
    var $this = $(this);
    $this.css('background-image', 'url(' + $this.data('image') + ')');
})

var items = $('.item-image').length;
var currentItem = 0;

$('.item-image').each(function () {

    var $this = $(this);

    var img = new Image();
    img.src = $(this).data('image');
    img.onload = function () {
        var H2 = this.height;
        $this.attr('data-stellar-vertical-offset', -(H2 / 2));
    }

    currentItem++;

    if (currentItem >= items) {
        /* setTimeout(function () { */
            $.stellar();
        /* }, 10) */
    }

})