JSFiddle - React, Tailwind, and code Playground

by yapkm01

HTML

<body>
	<br />
	<br />
	<br />
	<header>
		<div id="header-center-11x12">
			<img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
				alt="goeasyhome" />
		</div>
	</header>

	<br />
	<div id="main-content">
		<form method="post" action="j_security_check">
			<div id="email">
				<input type="email" placeholder="Email Address" name="j_username"
					pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
					required="required" />
			</div>
			<div id="password">
				<input type="password" placeholder="Password" name="j_password"
					required="required" />
			</div>
			<br />
			<div id="signin">
				<input type="submit" value="Sign In" />
			</div>
		</form>
		<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
			Password? </a> <a class="passwdsignup-color signup-position"
			href="/signup.jsp">Sign Up?</a>
	</div>
</body>

CSS

/* body section */
body {
	margin: 0.00em;
	font-family: verdana,geneva,sans-serif;
	font-size: 62.5%;
	font-style: normal;
	font-weight: normal;
}

/* header section */
#header-center-85x5 {
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	height: 5.00em;
	background-color: #FFFFFF;
}

#header-center-11x12 {
	margin-left: auto;
	margin-right: auto;
	width: 9.3%;
	height: 12.00em;
	background-color: #FFFFFF;
}

/* navigator section */
nav {
	width: 100%;
	height: 3.80em;
	border-style: solid;
	border-width: 0.10em;
	border-left: none;
	border-right: none;
	background-color: #0082FE;
}

#nav-center {
	font-size: 1.40em;
	margin-left: auto;
	margin-right: auto;
	width: 85.2%;
}

/* sign-on */
#sign-on {
	float: right;
	padding: 0.78em;
	background-color: #000000;
	text-decoration: none;
	color: #FFFFFF;
}

#sign-on-menu {
	font-size: 0.80em;
	clear: right;
	float: right;
	border-left: solid;
	border-right: solid;
	border-bottom: solid;
	border-width: 0.01em;
	border-style: solid;
	width: 10.00em;
	display: none;
}

#sign-on-menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-family: sans-serif;
}

#sign-on-menu li {
	text-align: center;
}

#sign-on-menu li:hover {
	background-color: #babdb6;
}

#sign-on-menu a {
	text-decoration: none;
	color: #000000;
	line-height: 2.20em;
	width: 100%;
	height: 100%;
	display: block;
}

/* main container */
#main-content {
	margin-left: auto;
	margin-right: auto;
	width: 25%;
	height: 7.50em;
	border: solid;
	border-color: #dcdcdc;
	border-width: 0.10em;
	border-radius: 5%;
}

/* division container */
form>div {
	width: 100%;
	height: 1.50em;
	font-size: 2.50em;
	padding: 0.30em;
	box-sizing: border-box;
}

/* all input element */
input {
	width: 100%;
	border: none;
	outline: none;
}

/* email attributes */
#email {
	border-bottom: solid;
	border-color: #dcdcdc;
	border-width: 0.05em;
}

/* sign in */
#signin {
	padding: 0;
	border: solid;
	border-color: #dcdcdc;
	border-width: 0.05em;
	border-radius:...

JavaScript

$(document).ready(function() {
		$('input[name="j_username"]').focus();
		$('#email input').on("invalid", function(event) {
			if (!$(this).val()) {
				this.setCustomValidity("Please fill in this field 2");
			} else {
				this.setCustomValidity("Please enter a valid email address 2");
			}
		});
		$('#email input').on("change", function(event) {
			if ($(this).val()) {
				this.setCustomValidity("");
			}
		});
	});