JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

Try your Facebook username:
<input type="text" id="tUsername" value="barackobama" />
<button id="btnLookup">Look up</button><br/>
<hr/>
<div id="t-container"></div>

CSS

body{ background:#f8f8f8; font: 12px Helvetica;line-height:1.5em;}
#tUsername, #btnLookup{ padding:2px 5px;margin:5px 0 10px;}
.t-card{background:#fff;width: 340px; border:solid 1px #ccc; margin-top:10px; padding:10px; overflow:hidden; color:#555; box-shadow:0px 0px 5px #eaeaea; } 
.t-img{ float: left; margin-right: 10px;} 
.t-name{ color:#222; font-weight:bold;} 
.t-loc{ float:left;}
.t-href{ clear:both; float:left;} 
.t-desc{ float:left; font-family: Georgia; font-style: italic; margin:5px 0;clear:both;} 
.t-username{ text-decoration:none;} 
.t-stats { display:block; float:left; margin-top:5px; clear:both; }
.t-stats li{ list-style:none; float:left; display:block; padding:0px 10px; border-left:solid 1px #eaeaea;} 
.t-stats li:first-child{ border:none; padding-left:0;} 
.t-count { font-weight: bold;}

JavaScript

$('#btnLookup').click(function(){
    var tUser = $('#tUsername').val();

    $.ajax({
    url: 'https://graph.facebook.com/' + tUser,
    type: 'GET',
    dataType: 'jsonp',
    timeout: 5000,
    beforeSend: function(){
        $('#t-container').append("Contacting Facebook...");
    },
    success: function (data) {
        var htmlFB = '<div class="t-card">' +            
            '<img class="t-img" src="http://graph.facebook.com/' + data.username + '/picture" />' +            
            '<label class="t-name">' + data.name + ' </label><br/>' +
            '<a class="t-loc" href="http://twitter.com/' + data.username + '">' + data.username + '</a><br/>' +
            (data.likes ? ('<label class="t-loc">Likes:' + data.likes+ '</label>') : '') +
            (data.description ? ('<p class="t-desc">' + data.description + '</p>') : '') +
            (data.start_time ? ('<p class="t-desc">Start Time:<br/>' + data.start_time + '</p>') : '') +
            (data.end_time ? ('<p class="t-desc">End Time:<br/>' + data.end_time + '</p>') : '') +
            (data.location ? ('<p class="t-desc">Location:<br/>' + data.location + '</p>') : '') +
            (data.venue ? ('<p class="t-desc">Venue:<br/>' + data.venue + '</p>') : '') +
            (data.founded ? ('<p class="t-desc">Founded:<br/>' + data.founded + '</p>') : '') +
            (data.mission? ('<p class="t-desc">Mission:<br/>' + data.mission + '</p>') : '') +
            (data.company_overview ? ('<p class="t-desc">Overview:<br/>' + data.company_overview + '</p>') : '') +
            (data.products ? ('<p class="t-desc">Products:<br/>' + data.products + '</p>') : '') +            
            (data.website ? ('Web:<br/><a class="t-href" href="'+ data.website +'">'+ data.website +'</a>') : '') +  
            (data.email ? ('Email:<br/><a class="t-href" href="'+ data.email +'">'+ data.email +'</a>') : '') +            
            '</div>';              
        $('#t-container').html(htmlFB);
        },
    ...