JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<ul tabbed>
	<li>
	<spam>Something</spam> 
	
	<ol tabbed>
		<li><div>Inner Label</div> This is inner content 1</li>
		<li><div>Inner Label 2</div> This is inner content 2</li>
		<li><div>Inner Label 3</div> This is  inner content 3</il>
	</ol>
	
	</li>
	<li><div>Label 2</div> This is content 2</li>
	<li><div>Label 3</div> This is content 3</li>
</ul>

</body>
</html>

JavaScript

// ########################### ##################### ########################### //
// ########################### TABIFY.JS SOURCE CODE ########################### //
// ########################### ##################### ########################### //

$().ready(
    function () {
		var activeTabAttibute = 'active-tab';
        var tabifierCss = ".tab-bar { margin-top: 1em; text-align: bottom; } .tab-bar > div { display: inline-block; border: 2px solid #0C4569; border-bottom: none; padding-top: 4px;  font-size: 13pt; background-color: #0C4569; color: white; border-radius: 6px 6px 0 0; padding-left: 1em; padding-right: 1em; height: 1.35em; margin-right: 5px; margin-bottom: -2px; position: relative; /*for fake z-indexing above the tab content*/ } .tab-bar > div["+activeTabAttibute+"] { background-color: #d1e2eb; color: black; } .tab-bar > div:hover { background-color: white; color: black; cursor: pointer; } [tabbed] { display: inline-block; list-style: none outside none; border: 2px solid #0C4569; width: 98%; min-height: 300px; padding-left: 1em; padding-right: 1em; padding-bottom: 1em; margin-top: 0; padding-top: 1em; }";
        $("<style type='text/css'>" + tabifierCss + "</style>").appendTo("head");

		$("[tabbed]").each(
			function(i, tabs){
				var tabBar = $("<div class='tab-bar' />");
				
				$(tabs).before(tabBar)
				.children().each(
					function (j, tabElement) {
						var tab = $(tabElement);
						
						var firstTabChild = tab.children()[0];
						var tabLabel = $("<div class='tab'>" + $(firstTabChild).html() + "</div>");
						$(firstTabChild).remove();
						
						if (j == 0) { //first tab is active on page load
							tabLabel.attr(activeTabAttibute, true);
						} else { 
							tab.hide(); 
						}
						tabLabel.click(
							function () {
								tabLabel.attr(activeTabAttibute,...