JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/codef0rmer/socialFlair/master/js/jquery.socialflair.js"></script>
<form class="form-horizontal" onsubmit='javascript:return false;'>
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="focusedInput">Email: </label>
        <div class="controls">
          <input type='email' class='input-large' />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="focusedInput">URL: </label>
        <div class="controls">
          <input type='url' class='input-large' />
        </div>
      </div>  
      <div class="control-group">
       <label class="control-label" for="focusedInput">Number/Spinbox: </label>
        <div class="controls">
          <input type='number' class='input-large' min="0" max="10" step="2" value="6" />
        </div>
      </div> 
      <div class="control-group">
        <label class="control-label" for="focusedInput">Range/Slider: </label>
        <div class="controls">
          <input type='range' class='input-large' min="0" max="10" step="2" value="6" />
        </div>
      </div> 
      <div class="control-group">
        <label class="control-label" for="focusedInput">Date: </label>
        <div class="controls">
          <input type='date' class='input-large' />
        </div>
      </div> 
      <div class="control-group">
        <label class="control-label" for="focusedInput">Search: </label>
        <div class="controls">
          <input type='search' class='input-large' />
        </div>
      </div> 
      <div class="control-group">
        <label class="control-label" for="focusedInput">Color: </label>
        <div class="controls">
          <input type='color' class='input-large' />
        </div>
      </div> 
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Submit</button>
 ...

JavaScript

/*!
 * HTML5 Session Forms Demo
 *
 * @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();
        
       if (github !== '') $('#githubFlair').socialFlair('github', github, {});
       if (twitter !== '') $('#twitterFlair').socialFlair('twitter', twitter, {});
        if (facebook !== '' && clientid !== '' && clientsecret !== '') {
            $('#facebookFlair').socialFlair('facebook', facebook, {
                clientId        : clientid,
                clientSecret    : clientsecret
            });
        }
    }).click();
});