JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div class="example">
    <span style="background:maroon" >A</span>
    <span style="background:green"  >B</span>
    <span style="background:navy"   >C</span>
    <span style="background:orange" >D</span>
    <span style="background:fuchsia">E</span>
</div>

CSS

.example {
    text-align: center;
    font-size: 1.5em;
}
.example span {
    display: inline-block;
    position: relative;
    margin: 0.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    border: 2px solid black;
    color: white;
}

JavaScript

$('.example span').repeat().each($).animate({opacity:0,top:50},$).animate({opacity:1,top:0})