JSFiddle - React, Tailwind, and code Playground

HTML

bla bla bla <label class="myui-button">
   <span>Add Files</span> 
   <input type="file" id="files" name="file"></input>
</label> bla bla

CSS

#files {
position: absolute;
/*  top: 0; */
/*  right: 0; */
/*  margin: 0; */
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity = 0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}

.myui-button {
position: relative;
cursor: pointer;
text-align: center;
}

.myui-button span {
-webkit-box-align: center;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image: initial;
background-color: buttonface;
box-sizing: border-box;
-webkit-appearance: button;
white-space: pre;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-writing-mode: horizontal-tb;
}