JSFiddle - React, Tailwind, and code Playground

HTML

<input id="file-drop" type="file" />

<br>
<br>
<br>

<div id="file-drop">
	<input id="file-input" type="file" />
</div>

CSS

#file-drop{
	display:block;
	position:relative;
	height:5em;
	width:10em;
	background:#f5f5f5;
	border:solid 2px #ddd;
	border-radius:.5em;
	cursor:pointer;
}#file-drop>*{
	cursor:pointer;
}

#file-drop::before{
  transition: all 0.25s ease;
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:.5em;
	height:3em;
	background:#999;
	transform:translate(-50%, -50%);
}#file-drop::after{
    transition: all 0.25s ease;

	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:3em;
	height:.5em;
	background:#999;
	transform:translate(-50%, -50%);
}

#file-input{
	opacity:0;
	height:100%;
	width:100%;
}


#file-drop:hover::before, #file-drop:hover::after {
  	background:#777;
}