JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container">
    
    <div>
       <p></p>
    </div>
    <a class="fsl fsl-facebook" href="#" id="facebook-login">
       <span class="fa-facebook fa-icons fa-lg"></span>
       <span class="sc-label">Login with Facebook</span>
    </a>    
</div>

<div id="fb-root"></div>

CSS

* {
    margin: 0px;
    padding: 0px;
    text-decoration:none;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
body {
    background:rgb(249, 249, 249);
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.container > div > p {
    text-align: center;
    margin:40px auto;   
}
.fsl {
    display: table;
    margin:40px auto;
    padding: 6px;
    border-radius: 2px;
    opacity: 0.6;
}
.fsl-facebook {
    background:#14A0E9;
}
.fsl span {
    color: #FFF;
}
.fa-icons {
    font-family: FontAwesome;
    font-size: 20px;
    color: #FFF;
}
.fsl:hover {
    opacity: 1;
}
.hidden {
    display: none;
    opacity: 0;
}

JavaScript

$(document).ready(function () {

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '553435274702353',
          version    : 'v2.0'
        });
      };
    $('#facebook-login').on('click', function() {
      /** Fire up the oAuth dialog **/
       FB.login(function(response) {
           /** if the response has data **/
           if(response.authResponse) {
               FB.api('/me', function (user) {
                   $('#facebook-login').addClass('hidden');
                   $('p:eq(0)').text('Good to see you, '+ user.first_name);
               });
           /** response has no data, which indicates that the user cancelled the authorization, 
            ** Note: skipping permission(s) won't cause this or lead to this,
            ** you need to use FB.api('/me/permission') 
            ** to check the requeired permission(s) **/
           } else {
               $('p:eq(0)').text('You cancelled login or did not fully authorize the app, try again');
           }
           /** put permissions you need in scope parameter in this schema: 
            ** 'scope_1, scope_2, scope_3 ..etc' 
            ** in this example the app won't request any extra permission rather than the
            ** public_profile, so the scope is empty in our case **/
       }, { scope: '' });
     });
});

// Load the SDK
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));