JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="file" multiple id="gallery-photo-add"><br>
   <label> <div class="gallery">

      <input type="checkbox">
      <span class="caption">
      </span>
    
  </div>
</label>

CSS

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;

  pointer-events: none;
}


.gallery img {
  display: block;

}

.gallery input {
  display: none;
}
.gallery input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.gallery input:checked + .caption::after {
  content: 'âś”';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: green;
  font-size: 36px;
  line-height: 27px;
  text-align: center;
 }

JavaScript

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});