JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Between the title tags you'll want to enter anything you want seen on the browser tab -->
	<title></title>
<body>
	<!-- Enter the title you want the users to see in your facebook blue bar -->
	<h1></h1>
	<div id="titleBar">jon's supergame</div>
		<div id="leftSide">
			<div id="leftImage"></div>
			<div id="leftText"></div>
		</div>

		<div id="rightSide">
			<div id="rightText"></div>
			<div id="rightImage"></div>
		</div>

<footer>
</footer>
</body>

CSS

html					{	height:	100%;	
							background-color: #EDF0F5;	}

body					{	
							margin:	0%;
							padding:	0%;
							height:	100%;
						}

h1						{	background-color:	#3A5795;	
							width:	100%;
							height:	11%;
							margin-top:	0%;
							margin-left:	0%;
							margin-right:	0%;
							z-index:	10;
						}

footer				{	background-color:	#a5b5e5;
							position:	fixed;
							top:		85%;
							height:	15%;
							width:	100%;
							margin-bottom: 0%;
							margin-right:	0%;
							margin-left:	0%;
						}						

						

						
@font-face		{	font-family:	facebook;
							src:	url(FACEBOLF.otf);
						}	

#titleBar			{	color:	#ffffff;
							font-family:	facebook;
							font-size:	225%;
							position:	fixed;
							left:	18%;
							top:	4%;							
						}	

						
#leftSide			{	width:		45%;
							height:	60%;
							border-radius:	2em;
							margin-left:	2%;
							position:	abolsute;
							left:	 2%;
							top:	 16%;
						}
						


#leftText		{	width:	45%;
							display:	block;
							position:	relative;
							left:		54%;
							top:		50%;
							font-size:	150%;
							font-weight:	heavy;
							transform:	translate(0, -50%);
						} 
						
			
						
						
#rightSide		{	width:		45%;
							height:	60%;
							position:		absolute;
							right:	2%;
							border-radius:	2em;
							top:		13.25%;
						}


#rightText		{	width:	45%;
							position:	relative;
							left:		-5%;
							top:		50%;
							font-size:	150%;
							font-weight:	heavy;
							text-align:	right;
							transform:	translate(0, -50%);							
						}

.win					{	background-color: 	#5CE62E;
							z-index:	1;
							opacity:	1.0;
						}	

						
.lose				{	background-color: 	red;
							z-index:	1;
							opacity:	1.0;
						}

JavaScript

function resetFrame1 (){
	
	$('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
	callback();
	
}

function resetFrame2 (){
	
	$('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
	callback();
}

function end(){
    //right now undefined since I can't get this to work at all.
	
	
	
}





function stageOne(){
	
	var score = 0;
	
	$('#leftText').text("Green Living. . . . . Easy!!!")
	
	$('#leftImage').html("<img src=>");
	
	$('#rightText').text("Burn Your Tires!");
	
	$('#rightImage').html("<img src=>");
	
	$('html').keyup(function(e){

		if (e.which==97 || e.which==65){
			score++;
			$('#leftSide').css( "background-color", "green");
			
			$('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
					resetFrame1();
			});
		}	
		else if (e.which==76 || e.which==108){
			$('#rightSide').css( "background-color", "red");
			
			$('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
					resetFrame1();
			});
		}	
	});
	
}	

function stageTwo(){
	
	
		$('#leftText').text("Keep your lights on. It prevents home invasion.")
		
		$('#leftImage').html("<img src=>");
		
		$('#rightText').text("The earth needs YOU!");
		
		$('#rightImage').html("<img src=>");
	
	$('html').keyup(function(e){

		if (e.which==97 || e.which==65){
			$('#leftSide').css( "background-color", "red");
			
			$('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
					resetFrame2();
			});
		}	
		else if (e.which==76 || e.which==108){
			
			score++;
			$('#rightSide').css( "background-color", "green");
			
			$('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
					resetFrame2();
			});
		}	
	});	
}	


function stageThree(){
	
	
		$('#leftText').text("Organic Farms...