JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="contact-page">
    <div class="wellDataBox">
      <form action="#" method="post" id="wellDataForm" enctype="multipart/form-data">
        <label class="fileContainer">
          <span class="fileContainerTitle">Upload</span>
          <input type="file" name="condensate" class="inputFile" id="condensate">
          <img src="http://via.placeholder.com/80x80" class="paperclip" id="paperclip1" alt="attach">
          <span class="path" id="path1">Select File</span>
        </label>
      </form>
    </div><!--wellDataBox-->
  </div><!--contact-page-->
</div><!--wrap-->

CSS

.wrap {
  display: block;
  margin:0 auto;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
}
.contact-page {
  width: 100%;
  max-width: 1700px;
  margin: 100px auto;
  display: block;
  padding:0 10px;
}
.wellDataBox {
  display: inline-block;
  width:50%;
  margin-right: -4px;
  padding:15px;
  vertical-align: top;
}
#wellDataForm {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 700px;
}
.fileContainer {
  opacity: .6;
  display: inline-block;
  vertical-align: top;
  margin-right:-4px;
  width:33.33%;
  padding:10px;
  margin-bottom: 10px;
}
.fileContainer:hover {
  cursor: pointer;
}
.fileContainer input[type="file"] {
  display: none;
}
.path {
  width:100%;
  display: block;
  text-align: center;
  margin:10px 0;
}
.fileContainerTitle {
  font-size: 1.3em;
  width:100%;
  display: block;
  text-align: center;
  margin-bottom:10px;
}
.paperclip {
  width:80%;
  display: block;
  margin: 0 auto;
  /* Added */
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}