JSFiddle - React, Tailwind, and code Playground

HTML

Try your twitter 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: 'http://api.twitter.com/1.1/users/lookup.json?screen_name=' + tUser,
    type: 'GET',
    dataType: 'jsonp',
    timeout: 5000,
    beforeSend: function(){
        $('#t-container').append("Contacting Twitter...");
    },
    success: function (data) {
        var htmlTwitter = '<div class="t-card">' +
            '<img class="t-img" src="' + data[0].profile_image_url + '" />' +
            '<label class="t-name">' + data[0].name + ' </label>' +
            '(<a class="t-username" href="http://twitter.com/' + data[0].screen_name + '">@' + data[0].screen_name + '</a>)<br/>' +
            '<label class="t-loc">' + data[0].location + '</label>' +
            '<p class="t-desc">' + data[0].description + '</p>' +
            '<a class="t-href" href="'+ data[0].url +'">'+data[0].url +'</a><br/>' +
            '<ul class="t-stats">' +
                '<li>Tweets<br /><span class="t-count">' + data[0].statuses_count + '</span></li>' +
                '<li>Following<br /><span class="t-count">' + data[0].friends_count + '</span></li>' +
                '<li>Followers<br /><span class="t-count">' + data[0].followers_count + '</span></li>' +
            '</ul>' +
            '</div>';      
        
        $('#t-container').html(htmlTwitter);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            $('#t-container').html("Unable to find the Twitter contact. Please try a different username.");    
        }
        
    });    
    
});

$('#tUsername').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('#btnLookup').click();
        return true;
    }
});
$('#btnLookup').click();