JSFiddle - React, Tailwind, and code Playground

HTML

<div id='file'>
    <label id='text' for="inputFile1">No file selected.</label>
    <label for="inputFile1">
        <input type="file" id='inputFile1' class='fileInput' />
    </label>
</div>

CSS

input[type="file"] {
        opacity:0;
    }
    #file {
        background:url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
        width:100%;
        height:32px;
        position:relative;
        overflow:hidden;
    }
    #file label {
        padding:0 0 0 35px;
        color:green;
        width:100%;
    }
    #file #text {
        line-height:32px;
        width:100%;
        position:absolute;
        left:0px;
        top:0;
        color:green;
        font-size:11px;
    }

JavaScript

$('#file input[type="file"]').on('change', function () {
        var o = this.value || 'No file selected.';
        $(this).closest('#file').find('#text').text(o);
    });