JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<a href="#" class="myButton" id="logout">Logout!</a>

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

CSS

/* I always use http://www.bestcssbuttongenerator.com/ */
 .myButton {
    -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
    -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
    box-shadow: 0px 1px 0px 0px #f0f7fa;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
    background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
    background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
    background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
    background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
    background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2', GradientType=0);
    background-color:#33bdef;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #057fd0;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
    background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
    background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
    background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
    background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
    background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef', GradientType=0);
    background-color:#019ad2;
}
.myButton:active {
    position:relative;
    top:1px;
}

JavaScript

window.fbAsyncInit = function () {
     // init the FB JS SDK
     FB.init({
         appId: '553435274702353'
     });

 };

 // Load the SDK asynchronously
 (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

 $('#logout').click(function () {

     FB.logout(function (response) {
         // user is now logged out
         console.log('Logging You out, Bye Bye!');
     })
 });