JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ractivejs/ractive-transitions-slide/master/ractive-transitions-slide.js"></script>
<p>mouse over the boxes...</p>
<main></main>

<script id='template' type='text/ractive'>
    <div id='outer' on-mouseover='over()' on-mouseout='out()'>
        <p>outer</p>
        <div id='a' on-mouseover='over()' on-mouseout='out()'>a</div>
        <div id='b' on-mouseover='over()' on-mouseout='out()'>b</div>
        <div id='c' on-mouseover='over()' on-mouseout='out()'>c</div>
    </div>
    
    {{#each log}}
        <p intro='slide'>{{this}}</p>
    {{/each}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

#outer {
    background-color: #eee;
    padding: 1em;
}

#outer p {
    display: inline-block;
    margin: 0 1em 0 0;
}

#a, #b, #c {
    display: inline-block;
    background-color: #d00;
    width: 2em;
    height: 1.5em;
    margin-right: 2em;
    text-align: center;
    color: white;
    line-height: 1;
    padding: 0.5em 0 0 0;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: { log: [] },
    over: function () {
        var event = this.event.original,
            node = this.event.node;
        
        if ( !node.contains( event.relatedTarget ) ) {
            this.unshift( 'log', 'entered ' + node.id );
        }
    },
    out: function () {
        var event = this.event.original,
            node = this.event.node;
        
        if ( !node.contains( event.relatedTarget ) ) {
            this.unshift( 'log', 'left ' + node.id );
        }
    }
});