JSFiddle - React, Tailwind, and code Playground

HTML

<span class="hiddenFileInput">
  <input type="file" name="theFile"/>
</span>

CSS

.hiddenFileInput > input{
  height: 100%;
  width: 100;
  opacity: 0;
  cursor: pointer;
}
.hiddenFileInput{
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  
  /*for the background, optional*/
  background: center center no-repeat;
  background-size: 75% 75%;
  background-image: ...