JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<html>
	<head>
		<title><\matox></title>
		<style type="text/css">
			label {
				display: inline-block;
				width: 100px;
			}
			input {
				width: 85%;
				min-width: 200px;
			}
		</style>
	</head>

	<body>
		<h2>Getting your Page Access Token</h2>

		<div class="fb-login-button" data-scope="manage_pages" data-max-rows="1" data-size="medium"></div>
		<br>
		<button onclick="checkStatus()">Check FB status</button>

		<div class="fb-status"></div>
		<hr />

		<h2>Requesting the Pages</h2><button id="pageBtn" onclick="showPages()" class="btn btn-success clearfix">Get admin pages</button>
		<div class="page-selector" style="display:none;">
			<br>
			<br>
			<select id="pagesList"></select>
			<button id="selectPage" onclick="selectPage()">Select page</button>
		</div>
		<hr />

		<h2>Get info of page</h2>
		<div class="page-info" style="display:none;">
			<label for="pageName">Page Name: </label>
			<input id="pageName"/>
			<br>
			<label for="pageToken">Page Token: </label>
			<input id="pageToken"/>
			<br>
			<label for="pageLink">Page Link: </label>
			<input id="pageLink"/>
			<br>
			<label for="pageId">Page Id: </label>
			<input id="pageId"/>
			<br>
			<br>
			<button id="showEvents()" onclick="showEvents()">Show events</button>
		</div>

		<hr>
		<h2>Events from page</h2>
		<div class="event-selector" style="display:none;">
			<ul id="eventList"></ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				window.fbAsyncInit = function() {
					FB.init({
					appId      : '604985749619476',
					xfbml      : true,
					version    : 'v2.3',
					status     : true
					});
				};

				(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 =...