JSFiddle - React, Tailwind, and code Playground

by YameenYasin

HTML

<input type="text" value="sone random input field">
<div>
    <input type="file" class="btn-file" id="name1"  /> 
<button class="fake-button"  id="uploadFileBtn" type="button">UPLOAD DOCUMENT</button> 
</div>

CSS

.btn-file{
    position: relative;
    opacity: 0;
    z-index: 2;
    width: 202px;
    height: 30px;
    font-size:50px;
}
.btn-file:hover{
    cursor:pointer;
}
.fake-button{
    position: absolute;
    opacity: 1;
    left: 0;
    z-index: 1;
    width: 198px;
    height: 30px;    
}