JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="doclist">
        <ul id="documents">
            <li><a href="javascript:void(0);" rel="index1" title="index1.html">index1</a></li>
            <li><a href="javascript:void(0);" rel="index2" title="index2.html">index2</a></li>
            <li><a href="javascript:void(0);" rel="index3" title="index3.html">index3</a></li>
            <li><a href="javascript:void(0);" rel="index4" title="index4.html">index4</a></li>
            <li><a href="javascript:void(0);" rel="index5" title="index5.html">index5</a></li>
            <li><a href="javascript:void(0);" rel="index6" title="index6.html">Index6</a></li>
        </ul>
    </div>
    <div id="wrapper">
        <ul id="tabs">
            <!-- Tabs go here -->
        </ul>
        <div id="content">
            <!-- Tabs content go here -->
        </div>
    </div>
</div>

CSS

body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
        #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
        #tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
        #tabs li a { color:#fff; text-decoration:none; }
        #tabs li.current { background-color:#e1e1e1;}
        #tabs li.current a { color:#000; text-decoration:none; }
        #tabs li a.remove { color:#f00; margin-left:10px;}
        #content { background-color:#e1e1e1;}
        #content p { margin: 0; padding:20px 20px 100px 20px;}
        
        #main { width:900px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:20px;
             -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
        #wrapper, #doclist { float:left; margin:0 20px 0 0;}
        #doclist { width:150px; border-right:solid 1px #dcdcdc;}
        #doclist ul { margin:0; list-style:none;}
        #doclist li { margin:10px 0; padding:0;}
        #documents { margin:0; padding:0;}
        
        #wrapper { width:700px; margin-top:20px;}
            
        #header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
             -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
        #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}

JavaScript

$(document).ready(function() {
	$("#documents a").click(function() {
		addTab($(this));
	});
	$("#documents a").click(function() {
		var rel = $(this).attr("rel");
		var iframe_container = "#" + rel + "_content";
		$("#content iframe").hide();
		$("#content").children(iframe_container).show();
		$("#tabs li").removeClass("current");
		//alert("#tabs li a#" + rel);
		$("#tabs li a#" + rel).parent("li").addClass("current");
		
	});

	$('#tabs a.tab').live('click', function() {
		// Get the tab name
		var contentname = $(this).attr("id") + "_content";

		// hide all other tabs
		$("#content iframe").hide();
		$("#tabs li").removeClass("current");

		// show current tab
		$("#" + contentname).show();
		$(this).parent().addClass("current");
	});

	$('#tabs a.remove').live('click', function() {
		// Get the tab name
		var tabid = $(this).parent().find(".tab").attr("id");

		// remove tab and related content
		var contentname = tabid + "_content";
		$("#" + contentname).remove();
		$(this).parent().remove();

		// if there is no current tab and if there are still tabs left, show the first one
		if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

			// find the first tab    
			var firsttab = $("#tabs li:first-child");
			firsttab.addClass("current");

			// get its link name and show related content
			var firsttabid = $(firsttab).find("a.tab").attr("id");
			$("#" + firsttabid + "_content").show();
		}
	});

	$("#documents a:first").trigger('click');

});
function addTab(link) {
	// If tab already exist in the list, return
	if ($("#" + $(link).attr("rel")).length != 0)
		return;
	
	// hide other tabs
	$("#tabs li").removeClass("current");
	$("#content iframe").hide();
	
	// add new tab and related content
	$("#tabs").append("<li class='current'><a class='tab' id='" +
		$(link).attr("rel") + "' href='#'>" + $(link).html() + 
		"</a><a href='#' class='remove'>x</a></li>");

	/*
	$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +...