JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<textarea id="resizing"></textarea>

CSS

body{
    padding:30px;
    background:#fefefe;
}
textarea{
    background:#fff;
    border:1px solid #ccc;
    resize:none;
    width:200px;
    min-height:30px;
    display:block;
}
textarea:focus{
    outline:none;
    border:1px solid #999;
}
.grippie{
    background:#eee url(http://jsfiddle.net/img/handle-h.png) center center no-repeat;
    border: 1px solid #DDD;
    border-width: 0pt 1px 1px;
    cursor: s-resize;
    height: 9px;
    overflow: hidden;
}

JavaScript

(function (m) {
    function j(j) {
        g = m(j.data.el);
        g.blur();
        l = j.clientY + document.documentElement.scrollTop;
        e = g.height() - l;
        m(document).mousemove(q).mouseup(r);
        return !1
    }
    function q(j) {
        var m = j.clientY + document.documentElement.scrollTop,
            q = e + m;
        l >= m && (q -= 5);
        l = m;
        q = Math.max(x, q);
        g.height(q + "px");
        q < x && r(j);
        return !1
    }
    function r() {
        m(document).unbind("mousemove", q).unbind("mouseup", r);
        g.focus();
        e = g = null;
        l = 0
    }
    var g, e, l = 0,
        x = 32;
    m.fn.TextAreaResizer = function () {
        return this.each(function () {
            g = m(this).addClass("processed");
            e = null;
            m(this).parent().append(m('<div class="grippie"></div>').bind("mousedown", {
                el: this
            }, j));
            var l = m("div.grippie", m(this).parent())[0];
            l.style.marginRight = l.offsetWidth - m(this)[0].offsetWidth + "px"
        })
    }
})(jQuery);
            
jQuery('#resizing').TextAreaResizer();