JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="main-container">

<div class=" highlight" style="margin-left:0;">
<h2>Super Product Highlight</h2>
	<div class="row">
  
<div id="viewport" >
        <div id="world" ></div>
          </div>
    
        <img src ="http://davidnaylor.org/temp/thunderbird-logo-200x200.png" /> 
        <ul>
            <li>test test test</li>
            <li>test test test</li>
            <li>test test test</li>
            <li>test test test</li>
            <li>test test test</li>
           
        </ul>
        </div>
        <div class="row">
        <p>text text text text text text text text text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
        <button class = "btn btn-primary">Buy Now</button>
       <button class = "btn btn-warning" >Read More</button>
        </div>
    </div>
	</div>

<!--
<div id="viewport" >
	<div id="world" ></div>
</div>
 -->

CSS

/*CSS for JS Animation*/
*{ 
	box-sizing: border-box; 
	margin: 0; 
	padding: 0 
}
body {
	color: #eee;
	text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 16px;
	overflow: hidden;
}
#viewport {
	-webkit-perspective: 1000; 
	-moz-perspective: 1000; 
	-o-perspective: 1000; 
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.28, rgb(69,132,180)),
		color-stop(0.64, rgb(31,71,120))
	);
}

#world {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -256px;
	margin-top: -256px;
	height: 512px;
	width: 512px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
}

#world div {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;	
	-o-transform-style: preserve-3d;	
}

.cloudBase {
	position: absolute;
	left: 256px;
	top: 256px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
}

.cloudLayer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 256px;
	height: 256px;
	margin-left: -128px;
	margin-top: -128px;
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	background-image: url('http://media.istockphoto.com/photos/blue-background-picture-id518094392?k=6&m=518094392&s=612x612&w=0&h=UocCMwE-wD8anw0M8vpT98P4yr8Pe3VhBJ1oMvm_gqA=');
}



/* css for highlight box...

JavaScript

//JS Animation starts here
(function() {
		var lastTime = 0;
		var vendors = ['ms', 'moz', 'webkit', 'o'];
		for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
			window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
			window.cancelRequestAnimationFrame = window[vendors[x]+
			  'CancelRequestAnimationFrame'];
		}
		if (!window.requestAnimationFrame)
			window.requestAnimationFrame = function(callback, element) {
				var currTime = new Date().getTime();
				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
				var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
				  timeToCall);
				lastTime = currTime + timeToCall;
				return id;
			};

		if (!window.cancelAnimationFrame)
			window.cancelAnimationFrame = function(id) {
				clearTimeout(id);
			};
	}())

	var layers = [],
		objects = [],
		
		world = document.getElementById( 'world' ),
		viewport = document.getElementById( 'viewport' ),
		
		d = 0,
		p = 400,
		worldXAngle = 0,
		worldYAngle = 0;
	
	viewport.style.webkitPerspective = p;
	viewport.style.MozPerspective = p;
	viewport.style.oPerspective = p;
	
	generate();
	
	function createCloud() {
	
		var div = document.createElement( 'div'  );
		div.className = 'cloudBase';
		var x = 256 - ( Math.random() * 512 );
		var y = 256 - ( Math.random() * 512 );
		var z = 256 - ( Math.random() * 512 );
		var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
		div.style.webkitTransform = t;
		div.style.MozTransform = t;
		div.style.oTransform = t;
		world.appendChild( div );
		
		for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
			var cloud = document.createElement( 'div' );
			cloud.style.opacity = 0;
			cloud.style.opacity = .8;
			cloud.className = 'cloudLayer';
			
			var x = 256 - ( Math.random() * 512 );
			var y = 256 - ( Math.random() * 512 );
			var z = 100 - ( Math.random() * 200 );
			var a = Math.random() * 360;
			var s = .25 +...