JSFiddle - React, Tailwind, and code Playground

Form UX/UI A new little bit of design and UI/X I'm enjoying experimenting with for forms.

by Jennifer Perrin

HTML

<form action="#">
    <fieldset>
        
        <legend>Your form</legend>
        
        <p>
            <label for="name">Name</label>
            <input type="text" id="name" class="text-input" placeholder="Your name&hellip;" />
        </p>
        
        <p>
            <label for="email">Email</label>
            <input type="text" id="email" class="text-input" placeholder="Your email address&hellip;" />
        </p>
        
        <p>
            <label for="message">Message</label>
            <textarea id="email" rows="10" cols="50" placeholder="Your message&hellip;"></textarea>
        </p>
        
    </fieldset>
</form>

CSS

html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
    padding:20px;
    color:#333;
}
fieldset{
    padding:20px;
}
fieldset p{
    margin-bottom:10px;
}
fieldset > :last-child{
    margin:0;
}
legend{
    font-weight:bold;
    color:#666;
}
label{
    position:absolute;
    left:-9999px;
}
fieldset,
.text-input,
textarea{
    border:1px solid #ccc;
}
.text-input,
textarea{
    padding:5px;
    cursor:pointer;
    font:inherit;
    color:#666;
    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
textarea{
    overflow:auto;
    resize:none;
}
.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus{
    cursor:text;
    color:#333;
    border-color:#228811;
    
    -moz-box-shadow:0 0 2px #228811, 0 0 10px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0 0 2px #228811, 0 0 10px rgba(0,0,0,0.1) inset;
    box-shadow:0 0 2px #228811, 0 0 10px rgba(0,0,0,0.1) inset;
}

JavaScript

$(document).ready(function() {

    // JS by @dan_bentley
    // Placeholder text for browsers without support for the placeholder attribute.
    if (!("placeholder" in document.createElement("input,textarea"))) {
        $('input,textarea').each(function(index) {
            var el = $(this);
            var placeholderText = el.attr('placeholder');
            if (placeholderText) {
                el.val(placeholderText);
                el.bind('focus blur', function(e) {
                    if (e.type === 'focus' && el.val() === placeholderText) el.val(''); 
                    if (e.type === 'blur' && el.val() === '') el.val(placeholderText); 
                });
            }
        });
    }
});