JSFiddle - React, Tailwind, and code Playground

by jquery4u

HTML

<div class="box-right-form">
    <form accept-charset="UTF-8" action="/sign_in" class="new_user" data-remote="true" data-type="json" id="sign-in-form" method="post" novalidate="novalidate">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓" />
        </div>
         <h1 class="box-heading">Sign in</h1>

        <div class="error-container"></div>
        <div class="input-group ill-input initialised">
            <label for="user_username">Username</label>
            <input id="user_username" name="username" size="30" type="text" />
        </div>
        <div class="input-group ill-input initialised">
            <label for="user_password">Password</label>
            <input id="user_password" name="password" size="30" type="password" />
        </div>
        <div class="input-group">
            <input name="commit" type="submit" value="Sign In" /> <small class="grey"><a href="/password-reset/">Forgot Password</a></small>

        </div>
    </form>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
* html {
    font-size:87.5%;
}
body {
    background-color: #c8c8c8;
}

.box-right-form {
    width: 280px;
    margin-right: 0;
    background: white;
    margin-bottom: 1.5em;
    position: relative;
    padding: 1.5em;
}
.box-heading, .box-heading-bold {
    font-size: 1.42857em;
    line-height: 1.575em;
    font-weight: normal;
}
input[type=text], input[type=password], input[type=email] {
    border:1px solid #ddd;
    border-radius:3px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.1) inset;
    outline:none;
    -webkit-transition:.1s all;
    -moz-transition:.1s all;
    -o-transition:.1s all;
    transition:.1s all;
    padding:10px .5em;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
    background:#fbfbfb;
    border-color:#bbb;
}

.input-group {
    margin-bottom: 1.5em;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
input[type=submit], button, .button, .button-secondary {
    background-color:#8cac54;
    border:none;
    border-radius:5px;
    color:#fff;
    display:inline-block;
    outline:none;
    text-align:center;
    font-weight: bold;
    -webkit-transition:.1s background-color;
    -moz-transition:.1s background-color;
    -o-transition:.1s background-color;
    transition:.1s background-color;
    padding:.375em .75em;
}
input[type=submit]:hover, input[type=submit]:focus, button:hover, button:focus, .button:hover, .button-secondary:hover, .button:focus, .button-secondary:focus {
    background-color:#7e9b4b;
    box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);
    text-decoration:none;
}
input[type=submit]:active, button:active, .button:active, .button-secondary:active {
    box-shadow:1px 1px 4px rgba(0, 0, 0, 0.4) inset;
}
input[type=submit][disabled], input[type=submit].is-disabled, button[disabled], button.is-disabled,...

JavaScript

(function () {
    var e;
    e = function (e, t) {
        return this.options = $.extend({}, this.defaults, t), this.$container = $(e), this.$field = this.$container.find("input"), this.init(), this
    }, e.prototype.defaults = {
        populated: "populated",
        focused: "focused",
        initialised: "initialised"
    }, e.prototype.init = function () {
        var e = this;
        return this.$field.on({
            "focus.illInput": function (t) {
                return e.$container.addClass(e.options.focused)
            },
            "blur.illInput": function (t) {
                return e.$container.removeClass(e.options.focused)
            }
        }), this.$container.addClass(this.options.initialised), this.checkField()
    }, e.prototype.checkField = function () {
        var e = this;
        return this.$field.val() === "" ? this.$container.removeClass(this.options.populated) : this.$container.addClass(this.options.populated), setTimeout(function () {
            return e.checkField()
        }, 100)
    }, $.fn.illInput = function (t) {
        return this.each(function () {
            var n, r;
            n = $(this);
            if (n.data("illInput") === void 0) return r = new e(this, t), n.data("illInput", r)
        })
    }
}).call(this);

$(".ill-input").illInput();

var $form = $('#sign-in-form');
$(document).on('submit', $form, function(e) 
{
    e.preventDefault();
    $form.find('input[type="submit"]').prop("disabled", !0).addClass("progress-striped progress active");
});