JSFiddle - React, Tailwind, and code Playground

HTML

<label class="custom-file-input">
        Upload
        <span>
            <input type="file" id="myfile" name="myfile" onchange="readURL(this)" />
        </span>
</label>
<input type="button" id="btnFinish" class="custom-file-input" value="Finish" />

CSS

.custom-file-input { 
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px; 
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627; 
}
    .custom-file-input:hover {
         background-color:#5cbf2a;
}
    .custom-file-input:active { 
    position:relative;
    top:1px; 
}
   .custom-file-input::-webkit-file-upload-button { 
    visibility: hidden; 
}
    .custom-file-input::before { 
    /*content: 'Upload';*/
    outline: none; 
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 11pt; 
}
input[type="file"] {
    width: 11%; 
    height:55px; 
    float:left; 
    display:block;
}
input[type="button"] { 
    overflow:hidden;
}
input[type="file"]{
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    opacity: 0;
    filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
    left:0;
}