JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="container upload">
    <span class="btn">Upload your file</span>
    <input type="file"/>
</div>

CSS

.container {
    width:300px;
    margin:50px auto 0;
    height:80px;
    }

.upload {
    position:relative;
    }

.upload > input[type=file] {
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    }

.upload > .btn {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#efefef;
    color:#555;
    border:solid 1px #ddd;
    border-radius:4px;
    text-align:center;
    font-size:2em;
    line-height: 80px;
    z-index:0; 
    }

.upload:hover > .btn {
    background:#f7f7f7;
    color:#333;
    }

.upload:active > .btn {
    background:#efefef;
    color:#333;
    margin-top:1px;
    }