JSFiddle - React, Tailwind, and code Playground
HTML
<form id="aim_Register" class="aim_Controls aim_Validate" novalidate>
<div class="aimSocial">
<p>Sign up with an existing account</p>
<div id="janrainEngageEmbed"></div>
</div>
<div class="aimLocal">
<p><em class="alt">Or </em>Sign up with your email and password</p>
<div class="validate"></div>
<ul class="aimInput">
<li class="email">
<label for="aim_Email"></label>
<div class="encloseEmail">
<input type="email" name="email" placeholder="Email" class="email required"
id="aim_Email">
</div>
<div class="emailTip"></div>
</li>
<li>
<label for="aim_Password"></label>
<div class="enclosePassword">
<input type="password" name="password" id="aim_Password" placeholder="Password"
class="newpassword password required">
</div>
</li>
</ul>
<div class="passwordHint">Your password must contain at least 6 characters, a capital letter and
a number.
<div class="show">
<div class="showPasswordCheck">
<input id="checkbox" type="checkbox" name="showpasswordcheck" class="ignore"
/>
</div>
<div class="showPasswordtxt">Show Password</div>
</div>
</div>
<input type="submit" value="Sign Up" name="register" class="submit">
</div>
<div class="aimFooter">
<p>By "Signing Up", you agree to CookingChannelTV.com\'s <a href="http://www.scrippsnetworks.com/privacy.aspx"
target="_blank">Privacy Policy</a> and <a href="http://www.scrippsnetworks.com/terms.aspx"
target="_blank">Terms of Use.</a>
</p>
<div class="aimOptions"><span>Already a member? <a id="SNIAim_Login" href="">Log In</a></span>
...
CSS
input, textarea { color: #000; }
.placeholder { color: #aaa; }
JavaScript
/*! http://mths.be/placeholder v1.8.7 by @mathias */
;
(function (window, document, $) {
var isInputSupported = 'placeholder' in document.createElement('input'),
isTextareaSupported = 'placeholder' in document.createElement('textarea'),
prototype = $.fn,
placeholder;
if (isInputSupported && isTextareaSupported) {
placeholder = prototype.placeholder = function () {
return this;
};
placeholder.input = placeholder.textarea = true;
} else {
placeholder = prototype.placeholder = function () {
return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.placeholder')
.bind('keydown.placeholder', clearPlaceholder)
.bind('blur.placeholder', clearPlaceholder).trigger('blur.placeholder').end();
};
placeholder.input = isInputSupported;
placeholder.textarea = isTextareaSupported;
$(function () { // Look for forms
$(document).delegate('form', 'submit.placeholder', function () {
// Clear the placeholder values so they don’t get submitted
var $inputs = $('.placeholder', this).each(clearPlaceholder);
setTimeout(function () {
$inputs.each(setPlaceholder);
}, 10);
});
});
// Clear placeholder values upon page reload
$(window).bind('unload.placeholder', function () {
$('.placeholder').val('');
});
}
function args(elem) {
// Return an object of element attributes
var newAttrs = {},
rinlinejQuery = /^jQuery\d+$/;
$.each(elem.attributes, function (i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
function...