JSFiddle - React, Tailwind, and code Playground
HTML
<form name="" method="post" action="#" enctype="multipart/form-data" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" id="imgInput" />
</div>
</div>
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" />
</div>
</div>
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" />
</div>
</div>
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" />
</div>
</div>
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" />
</div>
</div>
<div class="upload-file-container">
<div class="upload-file-container-text">
<span>Add<br />photo</span>
<input type="file" name="pic[]" class="photo" />
</div>
</div>
</div>
</fieldset>
</form>
CSS
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}
html[xmlns] .input-file-row-1{
display: block;
}
* html .input-file-row-1 {
height: 1%;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container:first-child {
margin-left: 0;
}
.upload-file-container > img {
width: 93px;
height: 93px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.upload-file-container-text{
font-family: Arial, sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.upload-file-container input {
position: absolute;
left: 0;
bottom: 0;
font-size: 1px;
opacity: 0;
filter: alpha(opacity=0);
margin: 0;
padding: 0;
border: none;
width: 70px;
height: 50px;
cursor: pointer;
}