JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.indefinitedesigns.com/jquery.scrollingTabs.js"></script>
<div id="page">
    <div id="content">
	<button id="add_tab">Add Tab</button>
        <div id="tabs" style="margin:3px; margin-left:1.5px;">
            <ul id="tabs_ul">
                <li><a href="#tabs-1">Videos</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-2">Stats</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-3">Themes</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-4">Nunc tincidunt</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-5">Proin dolor&nbsp;&nbsp;</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-6">Aenean lacinia</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-7">Nunc tincidunt</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-8">Proin dolor</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-9">Aenean lacinia</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-10">Nunc tincidunt</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-11">Proin dolor</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-12">Aenean lacinia</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-13">Nunc tincidunt</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-14">Proin dolor</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a href="#tabs-15">Aenean lacinia</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
                <li><a...

CSS

html {
	height: 100%;
}
body {
	height: 100%;
	font-size:8pt;
	margin: 0px;
}

#page {
	height: 100%;
}

#content {
	height: 100%;
	overflow:auto;
	width:auto;
}

#tabs { 
	margin-top: 1em; 
}

#tabs li .ui-icon-close { 
	/*float: right; */
	margin: 0.4em 0.4em 0 0; 
	cursor: pointer;
	display:inline-block;
}

.ui-tabs-bar-container {
	
}

.ui-tabs-tabs-container {
	overflow:hidden;
}

.ui-tabs-left-button {
	float:left; 
	position:relative; 
	top:2px;
	display:inline-block;
}

.ui-tabs-right-button {
	float:right; 
	position:relative; 
	top:2px;
	display:inline-block;

}

JavaScript

// modal dialog init: custom buttons and a "close" callback reseting the form inside
	var dialog = $( "#dialog" ).dialog({
		autoOpen: false,
		modal: true,
		buttons: {
			Add: function() {
				addTab();
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			form[ 0 ].reset();
		}
	});  
	
	var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100});
	
	
	var tabTitle = $( "#tab_title" ),
			tabContent = $( "#tab_content" ),
			tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
			tabCounter = 25;
	
	tabs.find(".ui-tabs-nav").sortable({
		stop: function() {
			tabs.tabs("refresh");
			
			// For some reason the sortable stop function stop the toggle call on the tabs widget
			// in IE only so this it to test to see if we need to run this Non IE part
			if(!$.ui.ie){
				tabs.tabs("option", "sorting", true);
			}
			
		},
		containment: $("#bar_container")
	});
	
	// addTab form: calls addTab function on submit and closes the dialog
	var form = dialog.find( "form" ).submit(function( event ) {
		addTab();
		dialog.dialog( "close" );
		event.preventDefault();
	});

	// actual addTab function: adds new tab using the input from the form above
	function addTab() {
		var label = tabTitle.val() || "Tab " + tabCounter,
			id = "tabs-" + tabCounter,
			li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
			tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

		tabs.find( ".ui-tabs-nav" ).append( li );
		tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
		tabs.tabs( "refresh" );
		tabCounter++;
		
	}

	// addTab button: just opens the dialog
	$( "#add_tab" )
		.button()
		.click(function() {
			dialog.dialog( "open" );
		});

	// close icon: removing the tab on click
	$( "#tabs span.ui-icon-close" ).live( "click", function() {
		var panelId = $( this...