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 = document.createElement('div');
list.className = 'contacts';
for(var i = 0; i < contacts.length; i++){
    var contact = document.createElement('div');
    contact.className = 'contact';
    
    var img = document.createElement('img');
    img.src = 'http://lorempixel.com/50/50/people/' + contacts[i].name;
    img.className = 'thumb';
    contact.appendChild(img);
    
    var name = document.createElement('div');
    name.className = 'name';
    name.innerHTML = contacts[i].name;
    contact.appendChild(name);
    
    var phone = document.createElement('div');
    phone.className = 'phone';
    phone.innerHTML = contacts[i].phone;
    contact.appendChild(phone);
    
    list.appendChild(contact);
}
document.body.appendChild(list);