JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://interalabs.tk/course/codeplayer/css/normalize.css">
<link rel="stylesheet" href="http://interalabs.tk/course/codeplayer/css/style.css">
<div id="wrapper">
		<header>
			<div id="logo">Play It!</div>
			<div id="runButton">Run</div>
			<div id="topBar">
				<ul>
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">JS</a></li>
					<li><a href="#">Result</a></li>
					<div class="clearFix"></div>
				</ul>
			</div>
		</header>
		<main>
			<div id="headerSpacer"></div>
			<div id="codePlayer">
				<div id="codeHtml" class="codeContainer row1-4">
					<div class="stickyCode">HTML</div>
                    <textarea><div id="hola">hola</div></textarea>
				</div>
				<div id="codeCss" class="codeContainer row1-4">
					<div class="stickyCode">CSS</div>
					<textarea>#hola {
background-color:red;
}</textarea>
				</div>
				<div id="codeJs" class="codeContainer row1-4">
					<div class="stickyCode">JS</div>
					<textarea>document.getElementById("hola").innerHTML="nohola";</textarea>
				</div>
				<div id="codeResult" class="codeContainer row1-4">
					<div class="stickyCode">RESULT</div>
					<iframe id="resultIframe"></iframe>
				</div>
			</div>
		</main>
	</div>

JavaScript

//*****************************bind funcitons************************************//
	$(function(){
		$("#topBar").find("a").click(function(){
			topBarItemClicked($(this));
		})
		$("#runButton").click(function(){
			runButtonTapped();
		})
		$("#runButton").mousedown(function() {
			/* Act on the event */
			$(this).toggleClass('tapped');
		});
		$("#runButton").mouseup(function() {
			/* Act on the event */
			$(this).toggleClass('tapped');
		});
	})


//*******************************some global vars***********************************//
var codeInputs=4;


//***********top bar caller**************//
function topBarItemClicked(sender){
	topBarItemAction(sender);
	hideCodeInput(sender);
	adjustInputWidth();
}

//***************************************run functions*******************************//
function runButtonTapped(){
	runHtml();
	runCss();
	runJs();
}


//*******************top bar main functions handerls*****************//
function topBarItemAction(sender){
	sender.toggleClass('unselected');
}
function hideCodeInput(sender){
	switch(identifyInput(sender)){
		case "html":
			$("#codeHtml").toggle();
			break;
		case "css":
			$("#codeCss").toggle();
			break;
		case "js":
			$("#codeJs").toggle();
			break;
		case "result":
			$("#codeResult").toggle();
			break;
	}
}


//*******************code inputs main funcitons*****************//
function adjustInputWidth() {
	readItems();
}
function checkVisibleInputs(){
	var idArray=["codeHtml","codeCss","codeJs","codeResult"];
	var visibleItems=[];
	for (var i = 0; i < idArray.length; i++){
		if ($("#"+idArray[i]).is(":visible")) {
			visibleItems.push("#"+idArray[i]);
		}
	}
	return visibleItems;
}
function readItems(){
	var items=checkVisibleInputs();
	for (var i = 0;i < items.length; i++){
		modifyClasses(items[i],items.length);
	}
}
function modifyClasses(sender,mode){
	/*mode 1 for full
	2 for 2
	3 for 3
	4 for 4 very straightforward xD*/
	switch(mode){
		case...