JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="item-vfb-7" class="vfb-item vfb-item-file-upload  ">
        <label class="vfb-desc" for="vfb-7">File Upload</label>
        <div class="upload">
            <input id="vfb-7" class="vfb-text  vfb-large    upload  {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-7"></input>
        </div> <span id="filename-7" class="filename"></span>

    </li>
    <li id="item-vfb-20" class="vfb-item vfb-item-file-upload  ">
        <label class="vfb-desc" for="vfb-20">File Upload</label>
        <div class="upload">
            <input id="vfb-20" class="vfb-text  vfb-large    upload  {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-20"></input>
        </div> <span id="filename-20" class="filename"></span>

    </li>
    <li id="item-vfb-21" class="vfb-item vfb-item-file-upload  ">
        <label class="vfb-desc" for="vfb-21">File Upload</label>
        <div class="upload">
            <input id="vfb-21" class="vfb-text  vfb-large    upload  {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-21"></input>
        </div> <span id="filename-21" class="filename"></span>

    </li>
</ul>

CSS

ul {
    list-style:none;
}
.filename {
    display:inline-block;
    width:100%;
    margin-top:10px;
}
#item-vfb-20, #item-vfb-21 {
    display:none;
}
label.vfb-desc {
    background:#1d1101;
    color:#f19f00;
    padding:7px 8px;
    -webkit-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
    z-index:-100;
    position:absolute;
    width:40%;
}
.vfb-item-file-upload label {
    width:50%!important;
    margin-left:7%!important;
    -webkit-border-radius:5px!important;
    border-radius:5px!important;
    text-align:center;
    background:#3D2403;
}
.upload {
    width:55%;
    padding:2px 0;
    background:transparent;
    border:0;
    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(29, 17, 1, 0.4);
    box-shadow: inset 0px 0px 2px 0px rgba(29, 17, 1, 0.4);
    overflow: hidden;
    margin-left:8%!important;
    border-radius:5px!important;
}
div.upload input {
    display:block!important;
    width:100%!important;
    opacity:0!important;
    overflow:hidden!important;
    border-radius:5px!important;
}

JavaScript

$(function () {
    $("#vfb-7").change(function () {
        var fileName = $(this).val();
        $("#filename-7").html(fileName);
        if (fileName != "") $(this).closest('li').next('li').show();
    });
});