JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

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;
}

JavaScript

$(function() {
  $("input[type=file]").on("change", function(e) {
    var output = $("<img/>", {
      src: URL.createObjectURL(e.target.files[0])
    });
    $(e.target).closest("div.pic-box").html(output)
  });
});