JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<!-- CSS -->
	<link href='' type='text/css'>

	
	<!-- JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://d1wvv2ihztft93.cloudfront.net/jquery.scrollorama.js"></script>
	<script src="http://d1wvv2ihztft93.cloudfront.net/animation.js"></script>

</head>
 <body style="height: 35600px"><div style=" width: 100%; height: 3000px; position: fixed"><div class="scrollblock" id="examples-transition"><div class="logo-container"><img src="http://d1wvv2ihztft93.cloudfront.net/logo.png" alt="logo" class="logo" /></div><div class="adjuster adjuster1"></div><div class="adjuster adjuster2"></div><div class="adjuster adjuster3"></div><div class="adjuster adjuster4"></div><div class="adjuster adjuster5"></div><div class="level" id="reality"><div class="shadow"></div><div class="wrapper"><div class="reality-clock-wrapper"><div class="reality-clock"><div class="clock-hand"></div></div></div><div class="level-name"><div class="name">Reality<b>?</b></div></div><h3 class="intro">The practice of entering dreams within dreams to plant an idea in someone’s mind</h3><div class="down-arrow"> How did it work? <img src="http://d1wvv2ihztft93.cloudfront.net/down-arrow.png" alt="down-arrow" width="25" height="34" /></div><div class="character-container saito"><div class="character"><div class="zzz-container-container"><div class="zzz-container"><div class="zzz"><b>z</b><b>z</b><b>z</b></div></div></div><span>Saito</span><span>Tourist</span></div></div><div class="character-container cobb"><div class="character"><div class="zzz-container-container"><div class="zzz-container"><div class="zzz"><b>z</b><b>z</b><b>z</b></div></div></div><span>Cobb</span><span>Extractor</span></div></div><div class="character-container eames"><div class="character"><div class="zzz-container-container"><div class="zzz-container"><div class="zzz"><b>z</b><b>z</b><b>z</b></div></div></div><span>Eames</span><span>Forger</span></div></div><div...

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);body{font-family:Montserrat,Helvetica,Arial,serif;color:#fff;text-transform:uppercase;height:15000px;background:#294852;text-align:center;font-size:20px;font-weight:400;line-height:32px;letter-spacing:.05em;-webkit-font-smoothing:antialiased}h3{font-weight:400;line-height:32px;z-index:20}h3.sorry{width:600px;text-align:center;margin:200px auto;line-height:40px}h4{font-weight:400;line-height:30px;font-size:18px;width:550px;top:200px;z-index:20}.level h4 span i,.level h3 span i{position:relative;font-style:normal;border-radius:15px;margin:-2px -2px;padding:2px 4px 2px 6px}h4.right{width:550px;right:60px;text-align:right}h4.right span{width:550px;right:0}h4.left{width:550px;left:60px;text-align:left}h4.left span{width:550px;left:0}h4.full,h3.full{width:860px;text-align:center;left:50px}h4.full span,h3.full span{width:860px;text-align:center;left:0;right:0}h4.small-left{font-size:16px;width:330px;left:60px;text-align:left}.scrollblock{margin:0;width:100%;height:100%;overflow:hidden;left:0}.wrapper{width:960px;height:700px;position:absolute;top:0;left:50%;margin-left:-480px}.level{height:700px;overflow:hidden;position:relative}.level *{position:absolute;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-ounbox}.level .bgouter{height:730px;width:1360px;position:absolute;top:-30px;left:50%;margin-left:-680px;z-index:-10;overflow:hidden}.level .bgcontainer{height:730px;width:1360px;float:left;position:relative}.bgouter .bg{width:1360px;left:0}#reality .bg{background:url(bgs.png) 0 -1200px no-repeat;width:215px;height:210px;top:340px}#level1 .bg{background:url(bgs.png) -220px -1200px no-repeat;width:385px;height:145px;top:250px}#level2 .bg{background:url(bgs.png) 0 -1450px repeat-x;width:4000px;height:300px;top:200px}#level3 .bg1{background:url(bgs.png) 0 0 no-repeat;height:400px;top:350px}#level3 .bg2{background:url(bgs.png) 0 -400px no-repeat;height:400px;top:350px}#level3...

JavaScript

if (screen.width <= 699) {
	document.location = "mobile.html";
	}
	if ((navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "mobile.html";
	}