JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Codeworks &raquo; File Management</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />
<link href="css/core.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/loginPageTransition.js"></script>
</head>

<body>
	<div id="container">
    
    	<!-- 1st View -->
    	<div class="view" id="loginView">
    		<div class="headerWrapper">
        		<div class="header" id="loginHead">
           			<span class="title">Codeworks File Management</span>
                	<span class="subTitle">Nice to see you! Please log-in.</span>
            	</div>
        	</div>
        
        	<div id="contentWrapper">
        		<div class="content">
            		<form class="loginFrm" name="login">
                		<label class="label"><strong>Username</strong></label>
                    	<br />
                    	<input type="text" class="inputText" name="username" tabindex="1"/>
                    	<br />
                    	<br />
                    	<label class="label"><strong>Password</strong></label>
                    	<br />
                    	<input type="password" class="inputText" name="password" tabindex="2"/>
       		  		</form>
              
              		<div class="largeBtn" onclick="validate(login);">
           	  			<p class="largeBtnTxt">Login</p>
           	  		</div>
       	  		</div>
        	</div>
    	</div>
        <!-- End of 1st View -->
    
    	<!-- 2nd View -->
    	<div class="view" id="mainView">
    		<div...

CSS

* {
	margin: 0;
	padding: 0;
}

html, body, #container {
	width: 100%;
	height: 100%;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;	
}

.view {
	width: 100%;
	position: absolute;
	display: run-in;
}

#loginView {
	margin-left: 0;
}

#mainView {
	margin-left: 100%;	
}

.inputText {
	width: 270px;
	height: 38px;
	margin-top: 4px;
	padding: 4px;
	font-size: 1.5em;
	border-width: 1px;
	border-style: solid;
	border-color: #000 #515353 #515353 #000;
	border-radius: 3px;
}

.headerWrapper {
	width: 100%;
	height: 90px;
	margin: 0 auto;
	background-color: #232A38;	
}

.header {
	width: 1024px;
	height: 90px;
	margin: 0 auto;
	color: #FFF;
}

.title {
	display: block;
	padding-top: 15px;
	font-size: 1.75em;	
}

.contentWrapper {
	width: 100%;
	margin: 0 auto;
}

.content {
	width: 1024px;
	margin: 0 auto;
}

.loginFrm {
	margin-left: 60px;
	margin-top: 30px;	
}

.largeBtn {
	width: 130px;
	height: 50px;
	margin-top: 30px;
	margin-left: 60px;
	text-align: center;
	background-color: #093;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
}

.largeBtnTxt {
	padding-top: 15px;
	font-weight: bold;
	cursor: pointer;
}

JavaScript

function validate(form) {
	var user = form.username.value;
	var pass = form.password.value;
	
	if(user === "test") {
		if(pass === "pass") {
			var hideoptions = {"direction" : "left",  "mode" : "hide"};
			var showoptions = {"direction" : "left", "mode" : "show"};
			
			/*$("#loginView").toggle("slide", hideoptions, 1000, function() {
				$("#loginView").css("margin-left", "100%");	
			});
			$("#mainView").toggle("slide", showoptions, 1000, function() {
				$("#mainView").css("margin-left", 0);
			});*/
			
			$("#loginView").animate({ marginLeft: "-100%" }, 1000);
			$("#mainView").animate({ marginLeft: "0" }, 1000);
			
		} else {
			alert("nope");
		}
	} else {
		alert("nope 2");
	}
}