JSFiddle - React, Tailwind, and code Playground

by dreamdealer

HTML

<button>click!</button>
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

CSS

li {
    background: yellow;
    width: 400px;
    height: 100px;
    margin-bottom: 5px;
}
li.animate {
    height: 10px;
    background: red;
}
* {
    -webkit-transition: all 1s;  
}

JavaScript

$('button').click(function(){
    var newItem = $('<li class="animate">Item 1</li>');
    $('ul').prepend(newItem);
    $('ul li:eq(3)').addClass('animate');
    $('ul li:eq(4)').removeClass('animate');
});