JSFiddle - React, Tailwind, and code Playground

HTML

<div class="file-input custom">
  <span>Select File</span>
  <input type="file"/>
</div>
<!-- you can add anything to the .file-input div, and all clicks will always trigger the file input. you can change the size, etc. will always work. -->

CSS

.file-input.custom{
  /*your custom styles*/
  background: red;
  width: 150px;
  height: 150px;
}

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}