JSFiddle - React, Tailwind, and code Playground

by chetfarley

HTML

<div>
<form>
    <p>
        <label for="name">Your Name</label>
        <input type="text" id="name" />
    </p>
    <p>
    <label for="tel">Your Phone Number</label>
    <input type="tel" id="tel" />
    </p>
</form>
</div>


<div class="sick-input small">
    <label for="login_email_elm">Email</label>
    <input type="text" tabindex="1" name="login_email" id="login_email_elm"></div>

CSS

div {
    padding:20px;
}
p {
    position:relative;
}
label {
    z-index:1;
    padding-left: 6px;
    font: 12px "Helvetica Neue";
    display:block;
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -webkit-transition: opacity 0.15s linear;
}
label + input {
    display:block;
    background:transparent;
    z-index:2;
    margin-top:-18px;
    margin-bottom:10px;
    padding:3px;
    border:1px solid #ccc;
}

label.focused {
    opacity:0.25;
}
label.populated {
    text-indent:-10000px;
}

JavaScript

SickInput = {init: function() {
        var e, d, b, c, a;
        c = $$(".sick-input");
        a = [];
        for (d = 0, b = c.length; d < b; d++) {
            e = c[d];
            a.push(this._create(e))
        }
        return a
    },_create: function(d) {
        var c, a, b;
        c = d.identify();
        a = d.down("input") || d.down("textarea");
        a.observe("focus", function() {
            return d.addClassName("focused")
        });
        a.observe("blur", function() {
            return d.removeClassName("focused")
        });
        b = function() {
            if (d.hasClassName("populated") && a.getValue() === "") {
                d.removeClassName("populated")
            } else {
                if (!d.hasClassName("populated") && a.getValue() !== "") {
                    d.addClassName("populated")
                }
            }
            if (c in SickInput._handler_map) {
                return SickInput._handler_map[c]()
            }
        };
        this.show_errors();
        b();
        return setInterval(b, 100)
    },show_errors: function(d) {
        var g, a, f, e, c, b;
        a = ".error-bubble, .error-plain-text";
        g = d ? d.select(a) : $$(a);
        b = [];
        for (e = 0, c = g.length; e < c; e++) {
            f = g[e];
            if (f.down("span.error-message")) {
                b.push(f.show())
            } else {
                b.push(void 0)
            }
        }
        return b
    },_handler_map: {},add_interval_handler: function(b, a) {
        var c;
        c = b.identify();
        return this._handler_map[c] = a
    }};



/*$(document).ready(function() {
    $("label + input").each(function(type) {
        $(this).focus(function() {
            $(this).prev("label").addClass("focused");
        });
        $(this).keypress(function() {
            if ($(this).val() == "") {
                $(this).prev("label").removeClass("populated");
            }
            else {
  ...