JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-input-file">
<input type="hidden" value="10000000" name="MAX_FILE_SIZE">
<input class="input-file" type="file" size="1" onchange="readURL(this);" multiple="" name="files[]">
Choose files

CSS

.custom-input-file .input-file {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 10000px;
    border: 10000px solid transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    right: -1000px;
    top: -1000px;
    cursor: pointer;
}

.custom-input-file {
   background-color:yellow;
    width: 117px;
    height: 29px;
    font-family: "Tw Cen MT";
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 7px;
    margin: 0 auto;
    color:#FFF;
}


 .custom-input-file {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

 .custom-input-file {
  background-color:yellow;
    width: 229px;
    height: 29px;
    font-family: "Tw Cen MT";
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 7px;
    margin: 0 auto;
    color:black;
}

.custom-input-file {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

JavaScript

/*
$("input").click(function() { 
    $('input[type="file"]').click(); 
});
*/