JSFiddle - React, Tailwind, and code Playground

HTML

<!-- start upload wrapper -->
		<div class='upload-wrapper'>
			<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
				<label for='file-input'>
					<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
				</label>
				<input type='file' name='photo' id='file-input' accept='image/*'>
			</form>
		</div>
		<!-- end upload wrapper -->

CSS

/* Upload Photo */

.upload-wrapper {
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

.upload-wrapper img {
	width: 250px
	height: 280px;
	cursor: pointer;
}

[for="file-input"] {
  display: block;
  background-color: #ddd; /*as fallback*/
  background-repeat: no-repeat;
  background-size: cover;
  width: 250px;
  height: 250px;
}

.upload-wrapper input {
	display: none;
}