JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
   </ul>

<p></p>

CSS

li {
 display: block;
 margin: 0 0 2px 0;
 background: red;
    width: 10px;
    height: 10px;
}
p {
 width: 300px;
    height: 200px;
    background: blue;
}

JavaScript

$('li').each(function(i, el){
    console.log(i+ " : " + el);
    $(el).animate({'margin-left':'100px'}, 2000);
    $('p').animate({'height':'20px'}, 5000);
}).last().hide('1000');