JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<script src="http://preview.na-software.co.uk/Demo/FutureLearning4/jquery.ba-hashchange.min.js"></script>
<script src="http://preview.na-software.co.uk/Demo/FutureLearning4/iscroll.js"></script>
	<div id="menu"> <div class="menu-bars"> <span></span> </div> </div>
		
		<div class="toc">
			<div class="toc-inner">
	
		
			</div>
		</div>
	
		<div id="horizontal">
			<div class="sections">
			
				<div class="section">
				
					<div class="content">
					
						<h1 style="color:#333;">Section 0</h1>
						
					</div>
					
					<div class="arrow arrow-right arrow-right-black"></div>
				
				</div>
			
				<div class="section">
							
					<div class="content">
					
						<h1 style="color:#333;">Section 1</h1>
						
					</div>
					
					<div class="arrow arrow-left arrow-left-black"></div>
					
					<div class="arrow arrow-right arrow-right-black"></div>
					
				</div>
			
				<div class="section">
		
					<div id="vertical">
						<div class="sections">
						
							<div class="section" style="background:#333333;">
							
								<div class="content">
								
									<h1>Section 2.1</h1>
									
								</div>
							
								<div class="arrow arrow-left"></div>
								<div class="arrow arrow-down"></div>
								<div class="arrow arrow-right"></div>
								
							</div>
							
							<div class="section" style="background:#333333;">
							
								<div class="content">
								
									<h1>Section 2.2</h1>
									
								</div>
							
								<div class="arrow arrow-left"></div>
								<div class="arrow arrow-up"></div>
								<div class="arrow arrow-down"></div>
								<div class="arrow arrow-right"></div>
								
							</div>
							
							<div class="section" style="background:#333333;">
							
								<div class="content">
								
									<h1>Section 2.3</h1>
									
								</div>
							
								<div class="arrow arrow-left"></div>
								<div class="arrow arrow-up"></div>
								<div class="arrow...

CSS

*
			{
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
			}
		
			html, body
			{
				overflow: hidden;
				height: 100%;
				width: 100%;
			}
		
			#horizontal,
			#vertical
			{
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;

				/* Prevent native touch events on Windows */
				-ms-touch-action: none;

				/* Prevent the callout on tap-hold and text selection */
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				/* Prevent text resize on orientation change, useful for web-apps */
				-webkit-text-size-adjust: none;
				-moz-text-size-adjust: none;
				-ms-text-size-adjust: none;
				-o-text-size-adjust: none;
				text-size-adjust: none;
			}
		
			#horizontal,
			#vertical
			{
				background: #666;
			}
		
			.sections
			{
				box-shadow: rgba(0,0,0,.6) 0 0 16px;
				position: absolute;
				
			}
		
			.section {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			
			.section
			{
				background: #eeeeee;
			}
			
			.b
			{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 40px;
				height: 40px;
				background: #fff;
			}
			
			#horizontal .sections,
			#horizontal .section
			{
				float: left;
				width:100%;
			}
			
			.arrow
			{
				cursor: pointer;
				display: block;
				text-indent: -999em;
			}
			.arrow-left
			{
				width: 16px;
				height: 32px;
				background: url('http://preview.na-software.co.uk/Demo/FutureLearning4/arrow-left.png') 0 0 no-repeat;
				position: absolute;
				bottom: 20px;
				left: 20px;
				left: 28px;
				opacity: .5;
				z-index: 1000;
			}
			.arrow-right
			{
				width: 16px;
				height: 32px;
				background: url('http://preview.na-software.co.uk/Demo/FutureLearning4/arrow-right.png') 0 0 no-repeat;
				position: absolute;
				bottom: 20px;
				right: 20px;
				right: 28px;
				opacity: .5;
				z-index:...

JavaScript

// fix for map
			(function(fn){
				if (!fn.map) fn.map=function(f){var r=[];for(var i=0;i<this.length;i++)r.push(f(this[i]));return r}
				if (!fn.filter) fn.filter=function(f){var r=[];for(var i=0;i<this.length;i++)if(f(this[i]))r.push(this[i]);return r}
			})(Array.prototype);

			var horizontal, vertical;
			      var hpage = window.location.hash; 
                hpage = hpage.replace('#/section-', '');
			var currentSection = hpage;
			
			var firstLoad = true;
			
			var hashCalledByScroll = false;
			
			var sectionToScrollTo;	

			
			function yo(){
			
				setTimeout(function(){
					horizontal.refresh();
				}, 500);
			}
			
			function pageStart(){
			
				horizontal.refresh();
			
				if( window.location.hash == '' ) {
				
					showSplash();
					
					// after user clicks start they should be reloaded and fall into below

				} else {
				
					//console.log('page accessed with hash - either from load, or clicking start');
				
					var nums = location.href.match(/(section)-\d+/g).map(
						function(x){ return +x.replace(/\D/g,"") }
					);
					currentSection = nums[0];
					
					// NEED TO SHOW A SPLASH LOADING ICON THAT THEN LOADS IN THE SECTIONS FROM XML
					// AND OTHER STUFF
					
					if(currentSection == 0) {
						loadPage(currentSection);
						firstLoad = false;
					} else {
						var scrollTo = $('#horizontal > .sections > .section').eq(currentSection).attr('id');
						horizontal.scrollToElement( '#' + scrollTo, 1 ); // this has to be higher than 0 otherwise it doesn't call scrollEnd
					}
					
					yo();
					
				}
			
			}
			
			function showSplash(){
			
				$('body').append('<div class="splash"><div class="content"><h1>SPLASH</h1><button class="start">Start</button></div></div>');
			
			}
			
			function hideMenu() {
			
				$('.menu-bars').removeClass('open');
			
				$('.toc-inner').slideUp('fast', function(){
				
					$('.toc').fadeOut('fast');
				
				});
			
			}
			
			function loadPage(section) {
				
				if(...