JSFiddle - React, Tailwind, and code Playground

HTML

<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>
<div class="discrete">Foo bar</div>

CSS

.discrete {
    position:relative;
    opacity:1;

    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.discrete.out {
    left:-40px;
    opacity:0;    
}

JavaScript

var els = $('.discrete'),
    i = 0,
    f = function () {
        $(els[i++]).addClass('out');
        if(i < els.length) setTimeout(f, 200);
    };
f();