JSFiddle - React, Tailwind, and code Playground

Enhance native browser elements.

by Jennifer Perrin

HTML

<div class="content-wrapper">
                <p>Pure for jQuery is a JavaScript/jQuery plugin library to enhance native browser elements.</p>
                <h1>Input 1.0. Examples</h1>
                <p> A basic input with a hint and a max character length, using the predefined value. </p>
                <input type="text" class="input __simple" name="simple" value="I have value in this world." />
                <p> The Input plugin <strong>:Validator</strong> allows you to validate an input as many ways as you like, by passing an array of "filters" or conditional methods. </p>
                <input type="text" class="input __validate" name="validate" />
                <p> An Input instance with <em><strong>autogrow</strong></em> set to true. It will grow in width and height until it reaches its max height. Then it will have a scrollbar.</p>
                <input type="text" class="input __growable" name="growable" />
                <p> The Input plugin <strong>:Autocomplete</strong> allows you to search synchronous and asynchronous sources, building a navigable list of results as you type.</p>
                <input type="text" class="input __autocomplete" name="autocomplete" title="Search on Facebook" />
                <p>Below is an Input with Autocomplete and the <strong>:Tokenizer</strong> plugin. This is a navigable list of tokens that reside within the input.</p>
                <input type="text" class="input __tokenizer" name="tokenizer" title="Search for a superhero" />
                <p><strong>:Mentions</strong> is an Input plugin allowing you to tag items to a paragraph</p>
                <input type="text" class="input __mentions" name="mentions" />
</div>

CSS

body, textarea {
    margin : 0px;
    font-family : "Calibri", Arial;
}

ul {
    list-style-type:none;
    
    padding: 0px;
    margin-bottom : 10px;
}

ul li {
    margin : 0px;
    padding-bottom : 4px;
}

h1 {
    color : #048e9e;
    font-size : 20px;
}

h2 {
    font-size : 16px;
}

/* Nav */
.header {
    width : 100%;
    height : 83px;
    background : url(images/bg2.gif) repeat;
    border-bottom : 3px solid #000;
}

.logo {
    background : url('images/logo.png') no-repeat;
    width:145px;
    height : 63px;
    float : right;
    margin : 10px;
    margin-right : 15px;
}

.plugin-header {
    background : url('images/plugin.png') no-repeat;
    width:103px;
    height : 22px;
    float : left;
    margin : 30px;
}

.content-wrapper {
    width : 600px;
    padding : 30px;
    float:left;
    padding-bottom :100px;
}

.right-wrapper {
    width : 280px;
    float:right;
}

.super-wrapper {
    min-width : 960px;
}

.feature-block {
    padding : 15px;
    padding-top : 0px;
    border : 1px dotted #ccc;
    margin-top : 40px;
    margin-right : 20px;
}

.feature-block.notes {
    padding : 15px;
}

.feature-block h1 {
    font-size : 16px;
}

.syntaxhighlighter {
    overflow : hidden !important;
    border : 1px dashed #ccc;
    padding : 5px;
    font-size : 0.8em !important;
    margin-top : 30px !important;
    margin-bottom : 30px !important;
    padding-top : 20px;
    padding-bottom : 20px;
}
.input{padding:6px;font-size:12px;border:1px solid #ccc;height:20px;width:600px}.input.invalid{border:1px solid #000}.pureui-disabled{background:#e6e6e6;color:#999;text-shadow:#fff 1px 1px 1px}.pureui-navlist{border:1px solid #ccc;padding:4px;margin:0px;margin-top:-1px;border-top:0px;background:#fff;border-top:1px dotted #ccc;list-style:none;line-height:1em}.pureui-navlist li{margin:0px;padding:4px;background:#fff;font-size:12px;border-bottom:1px dotted #ccc}.pureui-navlist li.last{border-bottom:1px solid #fff}.pureui-navlist.up{border-bottom:1px dotted...

JavaScript

/*
*    Simple JavaScript Inheritance
*    By John Resig http://ejohn.org/
*    MIT Licensed.
*/

(function() {
    var d = !1,
        g = /xyz/.test(function() {
            xyz
        }) ? /\b_super\b/ : /.*/;
    this.Class = function() {};
    Class.extend = function(b) {
        function c() {
            !d && this.init && this.init.apply(this, arguments)
        }
        var e = this.prototype;
        d = !0;
        var f = new this;
        d = !1;
        for (var a in b) f[a] = "function" == typeof b[a] && "function" == typeof e[a] && g.test(b[a]) ?
        function(a, b) {
            return function() {
                var c = this._super;
                this._super = e[a];
                var d = b.apply(this, arguments);
                this._super = c;
                return d
            }
        }(a, b[a]) : b[a];
        c.prototype = f;
        c.prototype.constructor = c;
        c.extend = arguments.callee;
        return c
    }
})();


/*
*    JSizes - JQuery plugin v0.33
*
*    Licensed under the revised BSD License.
*    Copyright 2008-2010 Bram Stein
*    All rights reserved.
*/

(function(c) {
    var d = function(d) {
        return parseInt(d, 10) || 0
    };
    c.each(["min", "max"], function(e, a) {
        c.fn[a + "Size"] = function(b) {
            var c;
            if (b) return void 0 !== b.width && this.css(a + "-width", b.width), void 0 !== b.height && this.css(a + "-height", b.height), this;
            b = this.css(a + "-width");
            c = this.css(a + "-height");
            return {
                width: "max" === a && (void 0 === b || "none" === b || -1 === d(b)) && Number.MAX_VALUE || d(b),
                height: "max" === a && (void 0 === c || "none" === c || -1 === d(c)) && Number.MAX_VALUE || d(c)
            }
        }
    });
    c.fn.isVisible = function() {
        return this.is(":visible")
    };
    c.each(["border", "margin", "padding"], function(e, a) {
        c.fn[a] = function(b) {
     ...