JSFiddle - React, Tailwind, and code Playground

HTML

<main></main>

<script id='template' type='text/ractive'>
    <List names='{{names}}'/>
</script>

<script id='list' type='text/ractive'>
    {{#each groups}}
        <Group names='{{.names}}' letter='{{letter}}'/>
    {{/each}}
</script>

<script id='group' type='text/ractive'>
    <div class='group'>
        <h2>{{letter}}</h2>
        
        {{#each names}}
            <p>{{this}}</p>
        {{/each}}
    </div>
</script>

CSS

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

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

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

.group {
    border-bottom: 1px solid black;
}

JavaScript

Ractive.components.List = Ractive.extend({
    template: '#list',
    computed: {
        groups: function () {
            var groups = [];
            var groupByFirstLetter = {};
            
            this.get( 'names' ).forEach( function ( name ) {
                if ( !groupByFirstLetter[ name[0] ] ) {
                    group = { letter: name[0], names: [ name ] };
                    groupByFirstLetter[ name[0] ] = group;
                    
                    groups.push( group );
                } else {
                    groupByFirstLetter[ name[0] ].names.push( name );
                }
            });
            
            console.log( groups );
            
            return groups;
        }
    }
});


Ractive.components.Group = Ractive.extend({
    template: '#group'
});

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        names: [
            'alice',
            'amy',
            'andrew',
            'bob',
            'beatrice',
            'brenda',
            'charles',
            'colin',
            'camilla'
        ]
    }
});