JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/mouadino/socialFlair/master/js/jquery.socialflair.js"></script>
<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'...

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 () {
    $('button.btn').click(function () {
       var github = $('#github').val(),
           twitter = $('#twitter').val(),
           facebook = $('#facebook').val(),
           clientid = $('#clientid').val(),
           clientsecret = $('#clientsecret').val(),
           bitbucket = $('#bitbucket').val();
        
       if (github !== '') $('#githubFlair').socialFlair('github', github, {});
       if (twitter !== '') $('#twitterFlair').socialFlair('twitter', twitter, {});
        if (facebook !== '' && clientid !== '' && clientsecret !== '') {
            $('#facebookFlair').socialFlair('facebook', facebook, {
                clientId        : clientid,
                clientSecret    : clientsecret
            });
        }
        if (bitbucket !== '') $('#bitbucketFlair').socialFlair('bitbucket', bitbucket, {});
    }).click();
});