JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

CSS

.message-text {
	display: none;
}
.message {
	width: 50%;
	border: 1px solid #000;
}
.visible {
	display: block;
}

JavaScript

var xmlhttp = new XMLHttpRequest();
var url = 'https://api.myjson.com/bins/1x75v';
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var messageArr = JSON.parse(xmlhttp.responseText, function(key, value) {// правильная обработка времени
            if (key == 'dateTime') return new Date(value);
            return value;
        });
        generateMessages(messageArr);
    }
};
xmlhttp.open("GET", url, false);
xmlhttp.send();

function generateMessages(messages) {
    var output = "";
    for (var i = 0; i < messages.length; i++) {
        output += '<div class="message"><p class="message-sender">Name: ' + messages[i].name + '</p><time>Date: ' + messages[i].dateTime + '</time><p class="message-text">Message: ' + messages[i].message + '</p></div>';
    }
    document.getElementById("result").innerHTML = output;
}
function showMessages () {
    var names = document.getElementsByClassName('message-sender');
    var messages = document.getElementsByClassName('message-text');
    function toggleMessage (counter) {
        messages[counter].classList.toggle("visible");
    }
    for (var i = 0; i < names.length; i++) {
        names[i].onmouseover = function(){ toggleMessage(i) };
        names[i].onmouseout = function(){ toggleMessage(i) };
    }
}
showMessages();