JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

This tab control is working fine:
<div id="x-tab-area">
	<ul id="x-tabs">
		<li><a href="#x-overview">Overview</a></li>
		<li><a href="#x-history">History</a></li>
		<li><a href="#x-alt">Alternatives</a></li>
	</ul>
	<div id="x-overview">
		The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains. Browsers support these headers and respect the restrictions they establish. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request header, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.
	</div>
	<div id="x-history">
		Cross-origin support was originally proposed by Matt Oshry, Brad Porter, and Michael Bodell of Tellme Networks in March 2004 for inclusion in VoiceXML 2.1[14] to allow safe cross-origin data requests by VoiceXML browsers. The mechanism was deemed general in nature and not specific to VoiceXML and was subsequently separated into an implementation NOTE.[15] The WebApps Working Group of the W3C with participation from the major browser vendors began to formalize the NOTE into a W3C Working Draft on track toward formal W3C Recommendation status.
	</div>
	<div id="x-alt">
		CORS can be used as a modern alternative to the JSONP pattern. While JSONP supports only the GET request method, CORS also supports other types of HTTP requests. Using CORS enables a web...

JavaScript

var xTabControl = $('#x-tab-area').tabs();

$('#x-tabs').sortable({
	"axis"   : 'x',
	"cursor" : 'e-resize',
	"stop"   : function() {
		xTabControl.tabs('refresh');
	}
});

var yTabControl = $('#y-tab-area').tabs();

var yTabs = $('#y-tabs').sortable({
	"axis"   : 'x',
	"cursor" : 'e-resize',
	"stop"   : function() {
		yTabControl.tabs('refresh');
	}
});

$('#y-tabs').sortable( "instance" ).floating = true;

yTabs.append('<li><a href="#y-overview">Overview</a></li><li><a href="#y-history">History</a></li><li><a href="#y-alt">Alternatives</a></li>');
yTabControl.append('<div id="y-overview">The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains. Browsers support these headers and respect the restrictions they establish. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request header, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.</div>')
.append('<div id="y-history">Cross-origin support was originally proposed by Matt Oshry, Brad Porter, and Michael Bodell of Tellme Networks in March 2004 for inclusion in VoiceXML 2.1[14] to allow safe cross-origin data requests by VoiceXML browsers. The mechanism was deemed general in nature and not specific to VoiceXML and was subsequently separated into an implementation NOTE.[15] The WebApps Working Group of the W3C with participation from the major browser vendors began to formalize the NOTE into a W3C Working Draft on track toward formal W3C Recommendation status.</div>')
.append('<div id="y-alt">CORS can be used as a...