JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select-file">
    <a href="#">Select a file!</a>
    <input type="file" />
</div>

<hr />

<div class="select-file">
    <a href="#">Select a file!</a>
    <input type="file" class="skewed-input" />
</div>

<hr />

<div class="select-file">
    <a href="#">Select a file!</a>
    <input type="file" class="skewed-input seethrough" />
</div>

CSS

.select-file {
   background-color: black;
   width: 140px;
   height: 140px;
   color: white;
   position: relative;
   margin: 20px;
    overflow: hidden;
}

.select-file a {
  top: 50px;
  left: 15px;
  position: absolute;
}

.skewed-input {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(-310px, 60px) scale(8);
  font-size: 6px;
  cursor: pointer;
}

.seethrough {
    opacity: 0;