JSFiddle - React, Tailwind, and code Playground

HTML

<p>check console</p>
<main></main>

<script id='async' type='text/ractive'>
    <div>
        {{#if ready}}
            {{yield}}
        {{/if}}
    </div>
</script>

<script id='template' type='text/ractive'>
    {{#each users}}
        <async>
            <article class='user'>
                <h1>[[name.last]], [[name.first]]</h1>
                <img src='[[picture]]'/>
                <ul>
                    <li><strong>age</strong> [[age]]</li>
                    <li><strong>email</strong> [[email]]</li>
                    <li><strong>phone</strong> [[phone]]</li>
                </ul>
            </article>
        </async>
    {{/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;
    margin: 0 0 1em 0;
}

.error {
    color: #d00;
    font-family: monospace;
}

.user {
    padding: 1em;
    border-bottom: 1px solid #eee;
}

.user img {
    position: absolute;
    left: 1em;
    width: 4em;
    height: 4em;
}

.user ul {
    padding: 0 0 0 4em;
    list-style: none;
}

JavaScript

// CHECK THE CONSOLE TO SEE RESULTS

var doAsync = true; // determines whether we render sync or async
var numItems = 1000; // how many to render
var limit = 100; // max milliseconds before yielding main thread

var tasks = [];

function runTasks ( callback ) {
    var start = Date.now();
    
    while ( ( Date.now() - start ) < limit ) {
        task = tasks.shift();
        if ( !task ) {
            callback();
            return;
        }
        task();
    }
    
    setTimeout( function () { runTasks( callback ); }, 0 );
}

Ractive.components.async = Ractive.extend({
    template: '#async',
    data: { ready: !doAsync },
    onrender: doAsync ? function () {
        tasks.push( function () {
            this.set( 'ready', true );
        }.bind( this ) );
    } : function () {}
});

console.log( 'rendering %s items %s', numItems, doAsync ? 'async' : 'sync' );

var users = getData( numItems );

console.time( 'initial render' );
var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        users: users
    }
});
console.timeEnd( 'initial render' );

// run tasks
if ( doAsync ) {
    console.time( 'async tasks' );
    runTasks( function () {
        console.timeEnd( 'async tasks' );   
    });
}

function getData () {
    var rawData, result = [];
    
    rawData = [
        {
            "_id": "54444add00ed6f50ee1e4bbe",
            "picture": "http://placehold.it/32x32",
            "age": 23,
            "name": {
                "first": "Hart",
                "last": "Juarez"
            },
            "email": "[email protected]",
            "phone": "+1 (946) 441-2164"
        },
        {
            "_id": "54444add64894af9ec552342",
            "picture": "http://placehold.it/32x32",
            "age": 27,
            "name": {
                "first": "Gross",
                "last": "Clark"
            },
            "email": "[email protected]",
            "phone": "+1 (928) 517-3394"
       ...