JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div>
    <input id="file-input" type="file" name="file" value="" />
    <button id="huge-btn">I am a huge button</button>
</div>

SCSS

div {
    width: 140px;
    height: 39px;
    position: relative;
}

#huge-btn {
    background-color: #eee;
    border-color: #ccc;
    border-width: 1px;
    padding: 10px;
}

#file-input {
cursor: pointer;
position: absolute;
border: 0;
background: rgba(0, 0, 0, 0);
font-size: 0;
padding-right: 90px;
left: -100px;
width: 100%;
height: 100%;
}

#huge-btn {
    position: absolute;
    z-index: 100;
}

div {
    overflow: hidden;
    
    &:hover {
        #huge-btn {
            background: #ddd;
                z-index: 1;
        }
        #file-input {
            z-index: 100;
        }
    }
        
        &:active, &:focus {
            #huge-btn {
                background-color: #ccc;
            }
        }
}