JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h1>About Me</h1><br/><br/>

Thanks for visiting my Blog.<br/><br/>

I am Amit Gharat a.k.a codef0rmer, an undeveloped homo sapien who still loves to jump from one branch to another on <a href="http://git-scm.com/">git</a>. I focus on building better and more complex web applications while at the same time trying to figure out how to make them easier to create and easier to maintain. I often spend leisure time solving problems (not programming, coding just happens) by working on my ideas and side projects. I sometimes post funny but original stuff on <a href="http://aawraa.wordpress.com/">aawraa.wordpress.com</a>.
<div style='padding-top:30px'>
    <div id='twitterFlair' style="float:left"></div>
    <div id='githubFlair' style="float:left;padding-left:10px;"></div>
    <div id='facebookFlair' style="float:left;padding-left:10px;"></div>
    <div id='bitbucketFlair' style="float:left;padding-left:10px;"></div>
</div>
<br/><br/><br/><br/><br/><br/>
<form class="form-horizontal" style="width:400px;"  onsubmit='javascript:return false;'>
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="focusedInput">Twitter Username: </label>
        <div class="controls">
          <input id='twitter' type='text' class='input-large' value='codef0rmer' />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="focusedInput">Github Username: </label>
        <div class="controls">
          <input id='github' type='text' class='input-large' value='codef0rmer' />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="focusedInput">Facebook Username: </label>
        <div class="controls">
          <input id='facebook' type='text' class='input-large' value='codef0rmer' />
        </div>
      </div>
      <div class="control-group">
        <label...

CSS

.sfTable {
  display : table;
  border-collapse: collapse;
  width : 207px;
  height : 57px;
}
.sfTwitter {
  background : url(https://github.com/codef0rmer/socialFlair/raw/master/img/twitter-watermark.png) no-repeat right bottom;
  border : 1px solid #CCCCCC;
  background-color : #F9F9F9;
}
.sfFacebook {
  background : url(https://github.com/codef0rmer/socialFlair/raw/master/img/facebook-watermark.gif) no-repeat right bottom;
  border : 1px solid #C4CDE0;
  background-color : #EDEFF4; 
}
.sfGithub {
  background : url(https://github.com/codef0rmer/socialFlair/raw/master/img/github-watermark.gif) no-repeat right bottom;
  border : 1px solid #D4D4D4;
  background-color: #ececec;
}
.sfBitbucket {
  background : url(https://github.com/codef0rmer/socialFlair/raw/master/img/bitbucket-watermark.png) no-repeat right bottom;
  border : 1px solid #D4D4D4;
  background-color: #ececec;
}
.sfRow {
  display : table-row;
  width : 100%;
}
.sfCell1 {
  display : table-cell;
  width : 48px;
  padding : 4px 0px 0px 5px;
}
.sfCell2 {
  display : table-cell;
  vertical-align : top;
  text-align : left;
  padding-left : 10px;
  padding-top : 3px;
  width : 146px;
}
.sfCell2 div.sfHandle {
  font : 13px "Tahoma",Helvetica,Arial,sans-serif;
  font-weight : bold;
  margin-right : 5px;
  width : 140px;
  word-wrap: break-word;
}
.sfTwitter div.sfHandle {
  color : #0084B4;
}
.sfFacebook div.sfHandle {
  color : #627AAD;
}
.sfGithub div.sfHandle {
  color : #333;
}
.sfCell2 div.sfFans {
  font : 11px "Tahoma",Helvetica,Arial,sans-serif;
  color : #999;
  font-weight : bold;
  padding-top : 5px;
}
.sfCell2 div.sfFans span { padding-right : 10px; }
.sfCell2 div.sfFans span.hireable { color : #A229A9; }
.sfTwitter .sfCell2 div.sfFans span.following { 
  background : url(https://github.com/codef0rmer/socialFlair/raw/master/img/twitter.ico) no-repeat left center; 
  padding-left : 20px;
}
.sfTwitter .sfCell2 div.sfFans span.followers { 
  background :...

JavaScript

/*!
 * socialFlair jQuery Plugin Demo
 *
 * @source: https://github.com/codef0rmer/socialFlair
 * @author: Amit Gharat a.k.a codef0rmer
 */
function truncateName(e){return e.length>28?e.substring(0,28)+"...":e}(function(e){e.fn.extend({socialFlair:function(t,n,r){var i={};r=e.extend({},i,r);return this.each(function(){var i=e(this),s=0,o=0,u=null,a=0;if(t==="twitter"&&n!==undefined){e(document).queue("ajaxRequests",function(){e.ajax({url:"http://api.twitter.com/1/followers/ids.json?screen_name="+n+"&cursor=-1",method:"get",dataType:"jsonp",success:function(e){s=e.ids.length}})});e(document).queue("ajaxRequests",function(){e.ajax({url:"https://api.twitter.com/1/friends/ids.json?cursor=-1&screen_name="+n,method:"get",dataType:"jsonp",success:function(e){o=e.ids.length;i.html("<a class='sfLink' href='http://twitter.com/#!/"+n+"'><div class='sfTable sfTwitter'><div class='sfRow'>"+" <div class='sfCell1'>"+"  <img class='sfProfilePic' src='https://api.twitter.com/1/users/profile_image?screen_name="+n+"&size=normal' width='48px' height='48px' />"+" </div>"+" <div class='sfCell2'>"+"  <div class='sfHandle'>"+truncateName(n)+"</div>"+"  <div class='sfFans'>"+" <span class='following' alt='Following' title='Following'>"+o+"</span>"+" <span class='followers' alt='Followers' title='Followers'>"+s+"</span>"+"  </div>"+"</div>"+"</div></div>​</a>")}})});e(document).dequeue("ajaxRequests");e(document).dequeue("ajaxRequests")}else if(t==="github"&&n!==undefined){e.ajax({url:"https://api.github.com/users/"+n,method:"get",dataType:"jsonp",success:function(e){s=e.data.followers;a=e.data.public_repos;i.html("<a class='sfLink' href='"+e.data.html_url+"'><div class='sfTable sfGithub'><div class='sfRow'>"+" <div class='sfCell1'>"+"  <img class='sfProfilePic' src='"+e.data.avatar_url+"' width='48px' height='48px' />"+" </div>"+" <div class='sfCell2'>"+"  <div class='sfHandle'>"+truncateName(e.data.name||e.data.login)+"</div>"+"  <div class='sfFans'>"+"   <span class='public_repos'...