JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
<div class="data-type">Hello world</div>
<div class="data-type">Hello world 2</div>

CSS

.data-type {
    background-color: red;
    margin-bottom: 4px;
    opacity: 0;
}

JavaScript

!function ($, undefined) {
    
    var timeoutID;
    
    var StretchRight = function (element, options) {
        this.$elem = $(element);
        this.options = options;
    };
    
    StretchRight.prototype.run = function () {
        var that = this,
            time = getRandomArbitrary(this.options.min, this.options.max);
        
        timeoutID = window.setTimeout(function () {
            that.$elem.css("opacity","1");
            that.$elem.addClass(that.options.css);
            that.clear();
        }, time);
    };
    
    StretchRight.prototype.animate = function () {
        this.$elem.addClass(this.options.css);
        this.clear();
    };
    
    StretchRight.prototype.clear = function () {
        window.clearTimeout(timeoutID);
    };
    
    $.fn.stretchRight = function (options) {
        return this.each( function () {
            var defaults = {
                min: 300,
                max: 1000,
                css: "stretchRight"
            };
            
            var my_options = $.extend(defaults, options);
            var stretchRight = new StretchRight(this, my_options);
            stretchRight.run();
        });
    };

    
    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    };
    
    $.fn.stretchRight.Construct = StretchRight;
    $.fn.stretchRight.noConflict = function () {
        $.fn.stretchRight = old;
        return this;
    };
}(jQuery);



$(function () {
    $(".data-type").stretchRight();
});