JSFiddle - React, Tailwind, and code Playground
HTML
<form action="login.php" method="post" id="login-form">
<div class="field">
<input name="email" id="email" type="text" class="text-input" value="E-mail" />
</div>
<div class="field">
<input name="code" id="code" type="password" class="text-input" />
<div id='codetip'>Access Code</div>
<label class="error" for="code" id="code_error"></label>
</div>
<br />
<div class="container">
<a id="submit" class="link-2">Access</a>
</div>
</form>
CSS
a {
border: solid 1px #777;
padding:5px;
}
#codetip {
position:absolute;
margin-top:-20px;
margin-left:5px;
}
JavaScript
$('#email').focus(function(){
if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
if($(this).val()==''){$(this).val('E-mail');}
});
$('#code').focus(function(){
$('#codetip').hide();
});
$('#code').blur(function(){
if($(this).val()==''){$('#codetip').show();}
});
$('#codetip').click(function(){
$(this).hide();
$('#code').focus();
});
$('#submit').click(function(){
$(this).submit();
});