JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mayor">
    <div class="mayor_div">
        <div class="float_left">
            <img id="mayor_img" src="" alt="" />
            </div>
            <div class="float_left space">
                <p class="text3" id="mayor_name">Mayor:</p>
                <p class="text3" id="mayor_check_in"></p>
            </div>
        </div>
    </div>
    <div class="last_tip">
        <div class="last_tip_div">
            <div class="float_left height">
                <img id="last_tip_img" src="" alt="" />
                </div>
                <div class="float_left space grid">
                    <p class="text3" id="last_tip_name"></p>
                    <p class="text3 comment_text" id="last_tip_comment"></p>
                </div>
                <div class="clear_both"></div>
            </div>
        </div>

JavaScript

var url = "https://api.foursquare.com/v2/venues/4dab1ba55da3ba8a479999b2?oauth_token=ZKLARA2MZVA4VXES3VTMP2XJOVXE1X3OBJMBXMDFAB1NR0V4&v=20130305";

$.getJSON(url, function(response){
    
    do{
        var countNum = (response.response.venue.tips.count)-1;
        var randomGroupNum = Math.floor((Math.random()*countNum)+0);
    }while(typeof(response.response.venue.tips.groups[randomGroupNum])==="undefined");
    
    var countItemNum = response.response.venue.tips.groups[randomGroupNum].count;
    var randomItemNum = Math.floor((Math.random()*countItemNum)+0);
    
    var mayorName = response.response.venue.mayor.user.firstName;
    var mayorSurname = response.response.venue.mayor.user.lastName;
    var mayorCount = response.response.venue.mayor.count;
    var mayorPic = "https://is1.4sqi.net/userpix_thumbs"+response.response.venue.mayor.user.photo.suffix;
    
    var text = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].text;
    var time = new Date((response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].createdAt)*1000);
    
    var userName = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.firstName;
    var userSurname = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.lastName;
    var userPic ="https://is1.4sqi.net/userpix_thumbs"+response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.photo.suffix;
    
   
    $("#mayor_img").attr("src", mayorPic);
    $("#mayor_name").append("<span style='font-weight:bold;'>"+mayorName+" "+mayorSurname+"</span>");
    $("#mayor_check_in").append("<span>"+mayorCount+" check-ins in last 60 days</span>");
    
    $("#last_tip_img").attr("src", userPic);
    $("#last_tip_name").append("<span style='font-weight:bold;'>"+userName+" "+userSurname+"</span>");
    $("#last_tip_comment").append("<span>"+text+"</span>");
});