JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div class='add-row'>
    <a href='#'>+ Add Row</a>
</div>
<div id='wrapper'>
</div>

CSS

@-webkit-keyframes myfirst {
    0%   {
        -webkit-transform: translate(100%);
        height: 0px;
        padding: 0;
        line-height: 0;
        opacity: 0;
    }
    35% {
        opacity: 0;        
    }
    65%  {
        -webkit-transform: translate(100%);
        height: 40px;
        line-height: 10px;
        padding: 15px;
    }
    100% {
    }
}

@-webkit-keyframes mylast {
    0%   {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: visible;
    }
}


* {
    box-sizing: border-box;
}
body {
    text-align: center;
}
#wrapper {
    padding: 20px;
}
.row {
    background: #f00;
    height: 40px;
    margin-bottom: 2px;
    padding: 15px;
    line-height: 10px;
    overflow: hidden;
    -webkit-animation: myfirst .4s;
    display: block;
}
.row.old {
    background: #ddd;
}
.row.fresh {
    height: 0;
    line-height: 0;
    padding: 0;
    opacity: 0;
    -webkit-animation: none;
}
.row + .row + .row {
    visibility: collapse;
    -webkit-animation: mylast .4s;
}

JavaScript

var counter = 0;
$('.add-row a').click(function() {
    $('#wrapper .row').addClass('old');
    $('#wrapper').prepend('<div class="row fresh">Row ' + counter++ + '</div>');
    window.setTimeout(function() {
        $('#wrapper .row').removeClass('fresh');
    }, 0);
    return false;
});