JSFiddle - React, Tailwind, and code Playground

by VKorneva

HTML

<div class="input-file">
  <label>Файл не выбран</label>
  <button class="btn btn-secondary">
    <input type="file">Загрузить
  </button>
</div>

SCSS

.input-file {
  position: relative;
  font-size:13px;
  label { 
    width:80%;
    color:#999;   
  }
  input[type=file] {
    position:absolute;
    opacity:0;
    top:0;
    left:0;
    min-width:100%;
    height:100%;
  }
}

.input-file.download {
  label:before { opacity:0.5; }
}

.input-file.downloaded {
  label { color:$bvk-dark-gray; }
  label:before {opacity: 1;}
}

.btn {
  border:1px solid #ff6413;
  border-radius:0;
  background-color:transparent;
  padding:0.4rem 1rem;
}

.btn-secondary {
  color:#ff6413;  
}