JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<form>
    <fieldset class='inputs'>
        <div class='input'>
            <input type='email' placeholder='Email' />
        </div>
        <div class='input'>
            <input type='password' placeholder='Password' />
        </div>
    </fieldset>
    <div class='submit'>
        <input type='submit' value='Login' />
    </div>
</form>

CSS

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        -webkit-transform: translateX(5px);
    }
    40% {
        -webkit-transform: translateX(-5px);
    }
    60% {
        -webkit-transform: translateX(5px);
    }
    80% {
        -webkit-transform: translateX(-5px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #1e1f21;
    font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
}
fieldset {
    border: none;
}
form {
    background: #eee;
    margin: 40px auto;
    width: 300px;
    padding: 30px;
}
input {
    width: 100%;
    font: inherit;
    border: 1px solid #aaa;
    outline: none !important;
    padding: 10px;
}
input[type='text'] {
    background: #fff;
}
input[type='submit'] {
    cursor: pointer;
    background: #bbb;
}
input[type='submit']:active {
    -webkit-transform: translateY(2px);
    background: #aaa;
}

.input {
    margin: 0 0 10px;
}

form.error {
    -webkit-animation: jiggle .3s .5s;
}

JavaScript

$(document).on('submit', 'form', function(e) {
    var self = this;
    e.preventDefault();
    $(this).addClass('error');
    window.setTimeout(function() {
        $(self).removeClass('error');
    }, 1000);
});