JSFiddle - React, Tailwind, and code Playground

HTML

<input id="push-notif-icon-upload" class="file-upload" accept="image/*" type="file" name="push_campaign[logo_attributes][upload]">

CSS

input[type="file"] {
   font-size: 0.5em;
}

.file-upload::-webkit-file-upload-button {
  visibility: hidden;
}
.file-upload::before {
  content: 'Select a custom file';
  display: inline-block;
  background: #03C9A9;
  border-radius: 2px;
  padding: 5px 8px;
  outline: none;
  color: white;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  margin-right: 20px;
}
.file-upload:hover::before {
  border-color: #1BBC9B;
}
.file-upload:active::before {
  background: #1BBC9B;
}