JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
<input type="password" class="input-xlarge">

CSS

body { padding: 10px; }


.colored-string-stripe {
    width: 10px;
    height: 100%;
    display: inline-block;
}

.colored-string-stripe:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.colored-string-stripe:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.colored-string-container {
    width: 30px;
    height: 18px;
    background: grey;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    top: 2px;
    left: -40px;
    -webkit-background-clip: padding-box;
}

.colored-string-container:after{
    content: ' ';
    width: 42px;
    height: 7px;
    background-color: rgba(255, 255, 255, 0.2);
    top: 0px;
    left: 0px;
    border-radius: 33%;
    position: absolute;
}

JavaScript

(function () {

    'use strict';

    function isElement(obj) { return !!(obj && obj.nodeType === 1); }

    function isObject(obj) { return obj === new Object(obj); }

    function merge(target, source) {
        var k;


        for (k in source) {
            if (source.hasOwnProperty(k) && !target[k]) {
                target[k] = source[k];
            }
        }

        return target;
    }

    function bind(fn, context) {
        var isType = Object.prototype.toString,
            slice = Array.prototype.slice,
            tmp,
            args,
            proxy;

        if (isType.call(context) === '[object String]') {
            tmp = fn[context];
            context = fn;
            fn = tmp;
        }

        if (isType.call(fn) !== '[object Function]') {
            return undefined;
        }

        args = slice.call(arguments, 2);
        proxy = function () {
            return fn.apply(context, args.concat(slice.call(arguments)));
        };

        return proxy;
    }

    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        } else {
            elm['on' + evType] = fn;
        }
    }

    function removeEvent(elm, evType, fn, useCapture) {
        if (elm.removeEventListener) {
            elm.removeEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.detachEvent) {
            var r = elm.detachEvent('on' + evType, fn);
            return r;
        } else {
            elm['on' + evType] = null;
        }
    }

    /**
     * VisualHash
     *
     * @class
     * @param  {DOM element} inputEl inputElement
     * @param  {Object} options
     * @return {Object} VisualHash instance
     *
     * @example
     *
     * var coloredhash = new...