JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div id="#banner1"><div class="module   deepest">

			<form class="form-login" id="form-login" name="login" method="post" action="/component/extendedreg/">
		<fieldset class="input">
		<p id="form-login-username">
			<label for="modlgn_username">Email</label><br>
			<input type="text" size="18" alt="username" class="inputbox" name="username" id="modlgn_username">
		</p>
		<p id="form-login-password">
			<label for="modlgn_passwd">Password</label><br>
			<input type="password" alt="password" size="18" class="inputbox" name="passwd" id="modlgn_passwd">
		</p>
				<p id="form-login-remember">
			<label for="modlgn_remember">Remember me</label>
			<input type="checkbox" alt="Remember Me" value="yes" class="inputbox" name="remember" id="modlgn_remember">
		</p>
				<input type="submit" value="Login" class="button" name="Submit">
	</fieldset>
	
	<ul>
		<li>
			<a target="_top" href="/component/extendedreg/?task=users.reset">Forgot your password?</a>
		</li>
		<li>
			<a target="_top" href="/component/extendedreg/?task=users.remind">Forgot your username?</a>
		</li>
				<li>
			<a target="_top" href="/component/extendedreg/?task=users.request_activation_mail">Request new activation mail</a>
		</li>
						<li>
			<a target="_top" href="/register?task=users.register&amp;fid=1">Create account</a>
		</li>
			</ul>
		<input type="hidden" value="users.do_login" name="task">
		<input type="hidden" value="L3RyaWFscy10cmlhbC1zY2hlZHVsaW5nL2p1cnktZmVlcw==" name="lret">
	</form>
		
</div></div>


<div id="bhov">
<h2>Customer Sign-In Above</h2>
</div>

JavaScript

window.addEvent('domready', function(){

	$('bhov').addEvents({
		mouseenter: function(){
			$('#banner1').morph({
				'background-color': '#BFFFC2'
			});
		},
		mouseleave: function(){
			$('#banner1').morph({
				'background-color': '#ffffff'
			});
		}
	});
});