JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="file-upload">
    <input type="file" />
    <button>Browse</button>
    <label>No File</label>
</div>

CSS

.file-upload {
  white-space: nowrap;
}

.file-upload > input[type="file"] {
  opacity: 0;            /* Set this to 0.2 and background-color: red to see how it overlays */
  width: 10em;           /* Enough width to cover the button and the label */
}

.file-upload button {
  margin-left: -10.3em;  /* move the button left to overlay the transparent file input */
  padding: 1em 1.5em 1em 1.3em;
  color: #fff;
  background: #008cba;
  border-width: 0;
  transition: background-color 300ms ease-out;
}

.file-upload button:hover {  
  background-color: #0078a0;
}

JavaScript

$('.file-upload input[type="file"]').change(function() {
  var label = $(this).parent().find('label');
  if($(this).val() === '') {
      label.text('No File');
  } else {
      label.text($(this).val().replace('C:\\fakepath\\',''));
  }
});