JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/RactiveJS/Ractive/master/release/0.3.9/Ractive-legacy.js"></script>
<div id='container'></div>

<script id='tpl' type='text/ractive'>
    <button on-click='insert'>Insert item</button>
    <button on-click='remove'>Remove item</button>
    <ul>
        {{#items}}
        <li intro-outro='flash'>{{this}}</li>
        {{/items}}
    </ul>
</script>

CSS

body {
    color: #353535;
    font-family: 'Arial'
}

JavaScript

flashTransition = function ( t, params ) {
    var color, duration;
    
    // Process parameters (second argument provides defaults)
    params = t.processParams( params, {
        duration: 400,
        color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
    });
    
    // Then, we execute the transition itself
    t.setStyle( 'color', params.color );
    
    // After the specified duration, call `t.complete()` to
    // signal that we've finished
    setTimeout( t.complete, params.duration );
};

Ractive.transitions.flash = flashTransition;

var items = [0];
var uid = 1;

var ractive = new Ractive({
    el: 'container',
    template: '#tpl',
    data: {
        items: items
    }
});

ractive.on({
    insert: function () {
        var index = Math.floor( Math.random() * items.length );
        items.splice( index, 0, uid++ );
    },
    remove: function () {
        var index = Math.floor( Math.random() * items.length );
        items.splice( index, 1 );
    }
});