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" id="email" class="validate-email" title="Email" />
            </li>
        </ul>
        <div>
            <button type="button" id="Send">Send</button>
        </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');
    // Labels over the inputs.
    myForm.getElements('[type=text]').each(function (el) {
        new OverText(el);
    });
    $('Send').addEvent('click', function () {
        var element = document.id('email');
        var val = Form.Validator.getValidator('IsEmpty').test(element) || (/^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i).test(element.get('value'));
        alert(val);
    });
});