JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="POST">
    <input style="width:150px" type="hidden" name="MAX_FILE_SIZE" value="40000"/>
    <div class="l-input-file">
        <input style="margin-bottom: 0px" type="file" id="myInput" name="myInput" size="16" />
    </div>
    <div><button type="submit" class="btn-black">Continuer</button></div>
</form>

CSS

.l-input-file .input-file-replacement * {
display: inline-block;
}

.btn-regular{
-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
background-image: linear-gradient(rgb(246, 246, 246), rgb(228, 228, 228));
border-bottom-color: rgb(162, 162, 162);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(162, 162, 162);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(162, 162, 162);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(162, 162, 162);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
color: rgb(51, 51, 51);
cursor: pointer;
display: inline-block;
font-family: Arial, Verdana, 'sans-serif normal normal';
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 11px;
line-height: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
text-align: left;
text-decoration: none;
vertical-align: baseline;
width: 149px;
}
.btn-black{
    -webkit-appearance: none;
-webkit-box-shadow: rgb(137, 137, 137) 0px 1px 0px 0px inset;
-webkit-writing-mode: horizontal-tb;
align-items: flex-start;
background-color: rgb(240, 240, 240);
background-image: linear-gradient(rgb(94, 94, 94), rgb(43, 43, 43));
border-bottom-color: rgb(78, 78, 78);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(78, 78, 78);
border-left-style:...

JavaScript

var inputFile = (function(context, $){
    
    var badIE = false;
    if($.browser.msie && $.browser.version < 10){
        badIE = true;
    }
    
    /* Replace all pattern by replacements */
    if(String.prototype.replaceAll === undefined){
        String.prototype.replaceAll = function(patterns, replacements){
            var string = this.split().join();

            if($.isArray(patterns) && $.isArray(replacements)){
                var pattern = patterns[0] || null,
                    replacement = replacements[0];

                if(pattern && replacement){
                    for(var i = 0, len = patterns.length, j = 0; i < len; i++){
                        string = string.replace(patterns[i], replacements[j]);
                        if(!replacements[++j]){
                            j--;
                        }
                    }
                }
            } else throw new Error('String[ReplaceAll] : Arguments must be Array objects');

            return string;
        };
    }

    /* Base code for all major browsers */
    var simpleInputFile = function($input, options){
        var id = $input.attr('name') || new Date().getTime(),
            $r = $(getTemplateHTML(id, options)),
            $btn = $('a:first', $r),
            $label = $('span:first', $r);

        $r.insertAfter($input);

        /* Hide input type file */
        if( $.browser.safari ){
            $input.css({
                'opacity': 0,
                'position': 'absolute',
                'z-index': 100,
                'cursor': 'pointer',
                'display':'block'
            });
            $input.parent().css({'display':'block','cursor': 'pointer', 'height':'auto', 'width':'auto'});
        }else{
            $input.css({display: 'none'});
        }
        

        /* Event on button */
        $btn.on('click', function(evt){
            evt.preventDefault();
            $input.trigger('click');
            return false;
        });

       ...