JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
    <legend>Sign up in seconds</legend>
    <input type="text" id="username" placeholder="&#61447; Choose a username"/>
    <input type="password" id="password" placeholder="&#xf023; Choose a password"/>
    <input type="submit" id="submit" value="Sign me up!" />
    <input type="reset" id="reset" value="Cancel" />
</form>
<div id="social-connect">
    <button id='facebook-connect'><i class="fa fa-facebook fa-3x"></i>Connect</button>
    <button id='twitter-connect'><i class="fa fa-twitter fa-3x"></i>Connect</button>
    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
</div>

CSS

*{
    padding: 0px;
    margin: 0px;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; /* Source: http://css-tricks.com/snippets/css/better-helvetica/ */
}

form{
    width: 100%;
}

form, legend, input{
    display: block;
    margin: 0 auto;
}

form:before{
  content: '';
  height: 10px;
  display: block;
  background: linear-gradient(to right, 
        #C3E279 0%, 
        #C3E279 14.28571%, 
        #F7FEC8 14.28571%, 
        #F7FEC8 28.57143%, 
        #FFD069 28.57143%, 
        #FFD069 42.85714%, 
        #F27669 42.85714%, 
        #F27669 57.14286%, 
        #DC9CBE 57.14286%, 
        #DC9CBE 71.42857%, 
        #C59AE0 71.42857%, 
        #C59AE0 85.71429%, 
        #969DCC 85.71429%, 
        #969DCC 100.0%);
}

legend{
    color: #B8B8B8;
    background: #F7F7F7;
    font-size: 35px;
    width: 100%;
    padding: 20px 0px;
    text-align: center;
}

#username, #password{
    cursor: auto;
}

#submit, #reset, #facebook-connect, #twitter-connect{
    cursor: pointer;
}

::-webkit-input-placeholder{
    color: #E0E0E0;
}

:-moz-placeholder { /* Firefox 18- */
   color: #E0E0E0; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #E0E0E0;
}

:-ms-input-placeholder {
    color: #E0E0E0;
}

#username, #password{ /* Source: http://bit.ly/1zwqM44 */
    color: #000000;
    position: relative;
    width: 280px;
    line-height: 1;
    padding: 10px;
    border: 2px solid #EBEBEB;
    border-bottom: 5px solid #EBEBEB;
    border-radius: 5px;
    transition: border 0.3s;
    outline: none;
    font-family: 'FontAwesome', 'Arial';    
}

#username{
    margin: 30px auto 20px auto;
}

#password{
    margin: 20px auto;
}

#submit{                /* Source: http://bit.ly/1dOqfOP */
    border: none;
    margin: 30px auto;
    font-size: 20px;
    color:...

JavaScript

// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
        // Logged into your app and Facebook.
        testAPI();
    } else if (response.status === 'not_authorized') {
        // The person is logged into Facebook, but not your app.
        document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
    } else {
        // The person is not logged into Facebook, so we're not sure if
        // they are logged into this app or not.
        document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
    }
}

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });
}

window.fbAsyncInit = function() {
    FB.init({
        appId      : '307961449394218',
        cookie     : true,  // enable cookies to allow the server to access 
        // the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.1' // use version 2.1
    });
    
    // Now that we've initialized the JavaScript SDK, we call 
    // FB.getLoginStatus().  This function gets the state of the
    // person visiting this page and can return one of three states to
    // the callback you provide.  They can be:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. Not logged into Facebook and can't tell if they are logged...