JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<li class="upload">
       <form>
    <div class="fakeupload">
       click to upload
    </div>
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" />
   </form>
   </li>

CSS

li { list-style: none; text-align: center; color: #fff;}

.upload {
        position:relative;
    width:100px;
   }

   .realupload {
    position:absolute;
    top:0;
    right:0;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    z-index:2;
    width:100px;
   }

   form .fakeupload {
    background: #f00;
    cursor: pointer;
    padding: 4px 0;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
   }

   form .fakeupload input {
    width:100px;
   }