JSFiddle - React, Tailwind, and code Playground

by Deivisson Sedrez

HTML

<div class="fakeButton">Upload button
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input></div>

CSS

.fakeButton{
    width: 100px; 
    height: 100px; 
    /*background-color:#D8D8D8; */
    position: relative; 
    border:1px solid #000; 
    border-radius:3px; 
    text-align:center; 
    font: 15px arial; 
    line-height:90px;
    box-shadow: inset 0 2px 3px 0 rgba(255,255,255,.3), inset 0 -3px 6px 0 rgba(0,0,0,.2), 0 3px 2px 0 rgba(0,0,0,.2);
    background-image: -webkit-linear-gradient(#EEEEEE, #D8D8D8 130%);
    background-image: -moz-linear-gradient(#EEEEEE, #D8D8D8 130%);
    background-image: -o-linear-gradient(#EEEEEE, #D8D8D8 130%);
    background-image: linear-gradient(#EEEEEE, #D8D8D8 130%);
}