JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<div class="headerTop">

</div>
<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
  
</div>
<button class="validBtn">
  Validate!
  </button>
<footer>
  © 2019 by ValidatorKorahlucky6, All Rights Reserved
</footer>

CSS

.upload-btn-wrapper {
  position: absolute;
  overflow: hidden;
  left:0;
  top:45%;
  right:0;
  margin:auto;
  font-size:14px;
  width:100%;
  display: inline-block;
}
.headerTop{
  height:5px;
  background:#069;
}
.btn {
    border: 2px solid #ccc;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 25px;
    width: 120px;
    height: 40px;
    width: 32%;
    left: 0;
    overflow: hidden;
    top: 50%;
    margin: auto;
    right: 0;
    font-size: 16px;
    font-weight: bold;
    position: fixed;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.validBtn{
  background:#d8951c;
  display:block;
  color:#fff;
  width:120px;
  height:40px;
  border-radius:5px;
  border:none;
  font-size:15px;
  top:50%;
  bottom:auto;
  font-weight:600;
  margin:45px auto 0 auto;
}
footer{
  position:fixed;
  bottom:0;
  top:auto;
  padding:5px 0;
  width:80%;
  left:0;
  right:0;
  margin:auto;
  color:#999;
  border-top:1px solid #999;
  text-align:center;
 
}