JSFiddle - React, Tailwind, and code Playground

by SANDEEP VIRANI

HTML

<img id="thumbnailUrl" src=""/><br>
ID: <span id="id"></span><br>
Hash : <span id="hash"></span><br>
Name: <span id="name"></span><br>
Surename : <span id="surename"></span><br>
Display Name : <span id="displayName"></span><br>
About Me :<span id="aboutMe"></span><br>
Current Location : <span id="currentLocation"></span><br>
Email : <span id="email"></span><br>
Phone: <span id="phone"></span><br>

CSS

body{
    background:#000;
    color:#444;
    font-weight:bold;
    font-size:12px;
}
span{
    color:#bbb;
    font-weight:normal;
}
img{
    border:1px solid #666;
}

JavaScript

var JSONObj;
$.ajax({
  dataType: "json",
  url: "https://dl.dropboxusercontent.com/u/93226059/sandeepvirani.json",
    async:false,
    success: function(data){
        JSONObj = data;
    }
});
document.getElementById("thumbnailUrl").src=JSONObj.entry[0].thumbnailUrl;
document.getElementById("id").innerHTML=JSONObj.entry[0].id;
document.getElementById("hash").innerHTML=JSONObj.entry[0].hash;
document.getElementById("name").innerHTML=JSONObj.entry[0].name.givenName;
document.getElementById("surename").innerHTML=JSONObj.entry[0].name.familyName;
document.getElementById("displayName").innerHTML=JSONObj.entry[0].displayName;
document.getElementById("aboutMe").innerHTML=JSONObj.entry[0].aboutMe;
document.getElementById("currentLocation").innerHTML=JSONObj.entry[0].currentLocation;
document.getElementById("email").innerHTML=JSONObj.entry[0].emails[0].value;
document.getElementById("phone").innerHTML=JSONObj.entry[0].phoneNumbers[2].value;