JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="container">
        <span>&#9650;</span> Forrst Whore
    </div>
</header>

<div id="container">
    
    <div id="main" role="main">
        <span class="question">Are you all hot for social coding? Enter your forrst username below to find out...</span>
        <input id="forrstID" type="text" />
        <div id="response"></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Telex);

body{
    background:#FAF9F0;
}
.container, #container{
    width:500px;
}
.container{
    margin:0 auto;
}
#container{
    margin:20px auto;
    text-align:center;
}

header{
    font-family: 'Telex', sans-serif;
    font-size: 36px;
    background-color: #223F17;
    color: #FAFAFA;
    text-shadow: 0 1px 1px black;
    letter-spacing: 2px;
}
header span{
    color: #5B9A68;
    position: relative;
    top: 1px;
    text-shadow: 0 1px 2px black;
}

#main{
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid white;
    background: #F7F7F7 url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAABGCAIAAACG37k3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEpJREFUeNrsxrkRwCAMAEHTf6eIR+KRUmY8FzlxA2y0KSKeV7q7+5+7s703W2uxOScbYzAzY6rKeu+stcZqrayUwkSE5Zy/OwIMAJjzya3gRqt2AAAAAElFTkSuQmCC) bottom left repeat-x;
    padding: 25px;
    border-image: initial;
    
    margin-top:25px;
    height:100px;
    width:100%;

}
.question{
    font-family: arial;
    display: block;
    width: 345px;
    margin: 0 auto 20px;
    color: #444;
    text-shadow: 0 1px 0 white;
}

#main input{
    border-radius: 5px;
    border: 1px solid #999;
    box-shadow: 0 1px 0 #fff;
    padding: 10px;
    font-size: 24px;
    text-align: center;
    color: #895B24;
    background:#EFF2EA;
}

#main input:hover{
    background: #f4f6f1;
}
#main input:active, #main input:focus{
    background: #fafafa;
    outline:none !important;
}

.resp{
    font-family: 'Times New Roman';
    font-size: 24px;
    color: #533006;
    text-shadow: 0 1px 0 white;
    font-style: italic;
}
a{
    color: #7E8951;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
    font-size: 23px;
    font-style: italic;
    font-family: arial;
    margin-top: 35px;
   ...

JavaScript

function forrstWhorer(data){
    var fullName = ((data.resp.name)).split(" ");
    
    var unrealisticArbitraryMathematicalCalculationForForrstWhoreCalculation = (
        data.resp.typecast_comments + (
            (data.resp.typecast_followers*3)+(data.resp.typecast_following*2)
        )
    );
    if(data.resp.in_directory){
        unrealisticArbitraryMathematicalCalculationForForrstWhoreCalculation+=20;
    }
    
    if(unrealisticArbitraryMathematicalCalculationForForrstWhoreCalculation>100){
        $('#main').html('<p class="resp"><b>Yes</b>, '+fullName[0]+', you are quite a Forrst whore.</p>');
    } else {
        $('#main').html('<p class="resp"><b>No</b>, You wish, '+fullName[0]+'. You\'re not a Forrst whore yet.</p>');
    }
    $('#main').append('<a href="#">View Post</a>');
}



$('#forrstID').keydown(function(e){
    if(e.which==13){
        e.preventDefault();
        $.ajax({
            url: 'http://forrst.com/api/v2/users/info',
            dataType:'jsonp',
            type:'GET',
            data:{
                username: $(this).val(),
                callback: 'forrstWhorer'
            },
            beforeSend: function(xhr) {
                 xhr.setRequestHeader('X-Alt-Referer', 'forrst.whore');
            },
            success: function(data){
                data;
            }
        });
    }
});