JSFiddle - React, Tailwind, and code Playground

by hleinone

HTML

<script src="https://raw.github.com/cowboy/javascript-debug/master/ba-debug.js"></script>
<input type="file" name="foo" />
<input type="file" name="bar" />
<input type="file" name="baz" />
<button id="baz" class="btn">Browse...</button>

CSS

.fileinput:hover, .fileinput.hover {
    color: #ff00ff;
}

.fileinput:focus, .fileinput.focus {
    color: #00ff00;
}

.fileinput:active, .fileinput.active {
    color: #ff0000;
}

button.btn {
    border: 0;
    color: #ffffff;
    background-color: #ffffff;
    background-image: url('http://www.clker.com/cliparts/u/O/s/T/g/n/aqua-button-th.png');
    width: 100px;
    height: 46px;
    line-height: 46px;
    vertical-align: middle;
    text-align: center;
    font-size: 75%;
}

JavaScript

/**
 * {{= pkg.name}} v{{= pkg.version}}
 *
 * Copyright 2011, {{= pkg.author}}
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($) {
    $.fn.fileinput = function(replacement) {
        var selector = this;
        var replacementHtml = "<button>Browse...</button>";
        if (replacement) {
            if (replacement instanceof jQuery)
                replacementHtml = $(replacement).wrap("<div />").parent().html();    
            else
                replacementHtml = replacement;
        }
        selector.each(function() {
            var element = $(this);
            element.wrap("<div class=\"fileinput-wrapper\" style=\"position: relative; display: inline-block;\" />");
            element.attr("tabindex", "-1").css({"font-size": "100px", height: "100%", filter: "alpha(opacity=0)", "-moz-opacity": 0, opacity: 0, position: "absolute", right: 0, top: 0, "z-index": -1});
            element.before(replacementHtml);
            element.prev().addClass("fileinput");
            var ua = $.browser;
            if (ua.opera || (ua.mozilla && ua.version < "2.0")) {
                element.css("z-index", "auto");
                element.prev(".fileinput").css("z-index", -1);
                element.removeAttr("tabindex");
                element.prev(".fileinput").attr("tabindex", "-1");
                element.hover(function() {
                    $(this).prev(".fileinput").addClass("hover");
                }, function() {
                    $(this).prev(".fileinput").removeClass("hover");
                }).focusin(function() {
                    $(this).prev(".fileinput").addClass("focus");
                }).focusout(function() {
                    $(this).prev(".fileinput").removeClass("focus");
                }).mousedown(function() {
                    $(this).prev(".fileinput").addClass("active");
                }).mouseup(function()...