JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tabs-2" class="tab-content">
<div class="tab-elements">
<div class="row">
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<div class="plus-box">xyz</div>
<input type="file" accept="image/*">
</div>
</div>
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<div class="plus-box">xyz</div>
<input type="file" accept="image/*">
</div>
</div>
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<div class="plus-box">xyz</div>
<input type="file" accept="image/*">
</div>
</div>
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<div class="plus-box">xyz</div>
<input type="file" accept="image/*">
</div>
</div>
</div>
</div>
</div>
CSS
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.pic-box{background-color:blue;height: 100px;margin-left:3%;margin-top:3%;}
.plus-box{color:red;font-size:60px;text-align:center;top:30px;}
.padding-box{padding-left:5px !important;padding-right:5px !important; padding-top:10px !important;}