JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div id="welcome-background"></div>
		<div id="welcome">
			<div class="welcome-banner">
				<h1>Welcome to XXXXXX! XXXXXX! XXXXXXX!</h1>
				<p>Join for FREE with Social Media or with <a href="#">your Email account</a></p> 
				<div class="fbButton">
					<a class="fbSignIn"><span></span>Sign In with Facebook</a>
				</div>
				<div class="twButton">
					<a class="twSignIn"><span></span>Sign In with Twitter</a><br />
					<span id="showme">0</span>
				</div>
			</div>	
		</div>

CSS

#welcome-background {background: transparent url(http://starlogicsystems.com/images/login_bak_4.png) center top no-repeat;position:absolute;top:180px;left:50%;z-index:2;width:580px;height:260px;margin-left: -280px;}
#welcome {
	position: absolute;
	top: 180px;
	left: 50%;
	z-index: 3;
	margin-left: -280px;
	width: 580px;
	height: 260px;
	text-align: center;
}

.welcome-banner {
	position: relative;
	padding: 40px 30px;
}

.welcome-banner h1 {
	text-transform: none;
	font-size: 28px;
}

.welcome-banner p {
	padding: 20px 20px 10px 20px;
	color: #000000;
	text-shadow: 1px 1px 0px #fff;
	font-size: 16px;
}

.welcome-banner a {
	color: rgb(10, 47, 195);
	text-decoration:none;
}

.welcome-banner a:hover {
	text-decoration:underline;
}

JavaScript

if (window.innerWidth && window.innerHeight) {
var winW = window.innerWidth;
}

	var xM = winW/180; 
	
	var axis = 0;
	$(window).bind('mousemove',function(e){
 var xCoord =  Math.floor(e.pageX/xM);
 axis = 0.6 * Math.sin(xCoord);
 var pageCoords = "( " + e.pageX + ", " + e.pageY + ", " + xCoord + " )";
 	 $("span#showme").text(pageCoords);
 
});
	setInterval(function() {
      $("#welcome-background").fadeTo(0, 0.4 + axis);
      
}, 100);