JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="/echo/html/" method="post">
	<fieldset>
		<legend>Contact form example</legend>
		<ul>
			<li><input type="text" name="name" class="required" title="Name" /></li>
			<li><input type="text" name="email" class="validate-email" title="Email" /></li>
			<li><input type="text" name="phone" title="Phone" /></li>
			<li><input type="text" name="url" title="Website / blog" /></li>
			<li><textarea id="myMessage" name="message" class="required" title="Message" rows="5" cols="30"></textarea></li>
			<li>
				<label>Would you like to &lt;something&gt;?</label>
				<input type="radio" id="news_y" name="newsletter" />
				<label for="news_y">Yes</label>
				<input type="radio" id="news_n" name="newsletter" class="validate-one-required" />
				<label for="news_n">No</label>
			</li>
		</ul>

		<div><input type="submit" value="Send" /></div>

	</fieldset>

	<div id="myResult"></div>

</form>

CSS

#myForm fieldset {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #c0c0c0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#myForm ul {
	list-style: none;
}

#myForm li {
	position: relative;
}

#myForm [type=text],
#myForm [type=submit],
#myForm textarea {
	margin-top: 3px;
	padding: 1px;
	border: 1px solid #000000;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#myForm [type=check],
#myForm [type=radio],
#myForm [type=submit] {
	cursor: pointer;
}

#myForm label {
	display: block;
}

#myForm [type=check] + label,
#myForm [type=radio] + label {
	display: inline-block;
	cursor: pointer;
}

#myForm input:hover,
#myForm textarea:hover,
#myForm input:focus,
#myForm textarea:focus {
	background-color: #ddffdd;
}

#myForm .validation-failed {
	border-color: #ff0000;
	background-color: #ffdddd;
}

#myForm .validation-advice {
	padding-bottom: 5px;
	font-weight: bold;
	color: #ff0000;
}

#myForm #myResult {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #0000ff;
	background-color: #ddddff;
}

#myForm #myResult:empty {
	border-width: 0;
	padding: 0;
}

#myForm .spinner {
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #f0f0f0;
}

#myForm .overTxtLabel {
	color: #888888;
}

JavaScript

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

	// The elements used.
	var myForm = document.id('myForm'),
		myResult = document.id('myResult');

	// Labels over the inputs.
	myForm.getElements('[type=text], textarea').each(function(el){
		new OverText(el);
	});

	// Validation.
	new Form.Validator.Inline(myForm);

	// Ajax (integrates with the validator).
	new Form.Request(myForm, myResult, {
		requestOptions: {
			'spinnerTarget': myForm
		},
		extraData: { // This is just to make this example work.
			'html': 'Form sent.'
		}
	});

});