JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/handlebarsjs/3.0.3/handlebars.min.js"></script>
<script id="contacts-template" type="text/x-handlebars-template">
    <div class="contacts">
        {{#each contacts}}
        <div class="contact">
            <img class="thumb" src="http://lorempixel.com/50/50/people/{{name}}" />
            <div class="name">{{name}}</div>
            <div class="phone">{{phone}}</div>
        </div>
        {{/each}}
    </div>
</script>

CSS

.contacts {
    background-color: #ddd;
    padding: 5px;
    width: 300px;
}

.contact {
    background-color: #fafafa;
    padding: 5px;
    margin: 5px;
    overflow: auto;
}

.thumb {
    float: left;
    margin-right: 5px;
}

JavaScript

var data = {
    contacts: [
        {
            name: 'Joe',
            phone: '987-654-3210'
        },
        {
            name: 'Daisy',
            phone: '194-2845-4444'
        },
        {
            name: 'Jim',
            phone: '333-444-1234'
        }
    ]
};

var source = document.getElementById('contacts-template').innerHTML;
var template = Handlebars.compile(source);
document.body.innerHTML = template(data);