JSFiddle - React, Tailwind, and code Playground

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 contacts = [
    {
        name: 'Joe',
        phone: '987-654-3210'
    },
    {
        name: 'Daisy',
        phone: '194-2845-4444'
    },
    {
        name: 'Jim',
        phone: '333-444-1234'
    }
];

var list = $('<div>').addClass('contacts');
for(var i = 0; i < contacts.length; i++){
    var contact = $('<div>').addClass('contact');
    
    var img = $('<img>')
        .attr('src', 'http://lorempixel.com/50/50/people/' + contacts[i].name)
        .addClass('thumb')
        .appendTo(contact);
    
    var name = $('<div>')
        .addClass('name')
        .text(contacts[i].name)
        .appendTo(contact);
    
    var phone = $('<div>')
        .addClass('phone')
        .text(contacts[i].phone)
        .appendTo(contact);
    
    list.append(contact);
}
$(document.body).append(list);