JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="messageList">
</ul>

JavaScript

var addMessages = function(e, args) {
    var listItems = 
        $(args).map(function(i,m){
            var item = $('<li></li>')
                .append($('<div></div>')
                    .css('font-weight', 'bold')
                    .append($('<span></span>').html(m.MessageTitle))
                    .append($('<span></span>')
                        .css('float', 'right')
                        .text(m.TimeSent)))
                .append($('<div></div>').html(m.MessageContent));
            console.info(item);
            return item;
        });
    var list  = $('#messageList');
    console.info(list);
    listItems.each(function(i,v){list.append(v);});
    };
var messageList = [{"IsRead":false,"MessageTitle":"Test Message","MessageContent":"A new staffing transaction has been assigned to you. Please process it by clicking \u003ca href=\"/P/Channel/ProcessInstance?Transaction=1&Edit=True\"\u003ehere\u003c/a\u003e.","TimeSent":"12/7/201012:12 AM"},{"IsRead":false,"MessageTitle":"Test Message","MessageContent":"A new staffing transaction has been assigned to you. Please process it by clicking \u003ca href=\"/P/Channel/ProcessInstance?Transaction=1&Edit=True\"\u003ehere\u003c/a\u003e.","TimeSent":"12/6/20108:13 PM"}];
console.info(messageList);
addMessages(null, messageList);