JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<HTML lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Titulo</title>
  <meta name="description" content="App Facebook">
  <meta name="author" content="Michel Martins, michel@setcomunicacao.com.br">


<script src="//connect.facebook.net/pt_BR/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript">

	//inicialização do Facebook API
	FB.init({
		appId: '<?php echo $APP_ID; ?>',
		status: true,
		cookie: false,
		xfbml: false
	});

	function logarFacebook(){
		FB.login(function(response){
			if(response.authResponse){
				//redireciona se estiver tudo ok
				verificaPermissoes();
			}
		}, {scope: 'public_profile, user_friends, publish_actions'});
	}

	function verificaConexao(){
		FB.getLoginStatus(function(response){
			if(response.status === 'connected'){
				console.log('usuário logado');

				//verificar se as permissoes estão todas concedidas
				verificaPermissoes();
				$('.bt-login').show();
				$('.bt-login').html('Começar');
				return true;

			}else{
				console.log('usuário não logado');
				$('.bt-login').show();
				logarFacebook();
			}
		})
	}

	function verificaPermissoes(){
		FB.api("/me/permissions", function (response) {
			console.log(response);
			var user_friends = false;
			var publish_actions = false;
			var public_profile = false;

			//se existe resposta e não existe erros
			if(response && !response.error){

				//percorrendo o array das permissoes
				for(i=0; i<response.data.length; i++){

					//se a permissao user_friends estiver no array e o status estiver concedido
					if(response['data'][i]['permission'] === 'user_friends' && response['data'][i]['status'] === 'granted'){
						user_friends = true;
					}

					//se a permissao public_profile estiver no array e o status estiver concedido
					if(response['data'][i]['permission'] == 'public_profile' && response['data'][i]['status'] == 'granted'){
						public_profile =...