JSFiddle - React, Tailwind, and code Playground

by younesalouani

HTML

<div class="file-upload">
     <image class="file-upload__label" id="profileImage" src="https://cdn.pixabay.com/photo/2015/03/11/09/35/african-business-668397_960_720.jpg" />
    <input id="upload" class="file-upload__input" type="file" name="file-upload" multiple="">
</div>

CSS

.file-upload {
	position: relative;
	display: inline-block;
}

.file-upload__label {
	display: block;
	color: #6D071A;
	border: 2px solid rgb(109,7,26);
	border-radius: 5px;
	cursor: pointer;
	-webkit-transition: color 0.5s; /* For Safari 3.0 to 6.0 */
	transition: color 0.5s; /* For modern browsers */
	letter-spacing: 2px;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	font-size: 0.8rem;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
  
.file-upload__label:hover {
  	background-color:rgb(109,7,26);
    color: white;
  }
    
.file-upload__input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 1;
    width:100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
	
}

.file-upload {
	margin-right: 2%;
  cursor: pointer;
  -webkit-transition: color 0.5s; /* For Safari 3.0 to 6.0 */
	transition: color 0.5s; /* For modern browsers */
}