JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-file">
    <span class="text">Nothing selected</span>
    <span class="button">Choose a file</span>
    <input type="file" id="file" />
</div>

CSS

.custom-file{
    float: left;
    position: relative;
    height: 20px;
}
.custom-file #file {
    position: absolute;
    bottom:0;
    left:0;
    with: 100%;
    height: 20px;
    opacity: 0;
}
.custom-file span{
    float: left;
    font-size: 11px;
    height: 18px;
}
.custom-file span.text {
    width: 100px;
}
.custom-file span.button {
    border:1px solid gray;
}

JavaScript

$(function() {
    $('#file').change(function(){
        $(this).siblings('.text').text(this.value || 'Nothing selected')
    });
})