JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="files" multiple>
<div id="list" class="thumblist"></div>

CSS

.thumblist{margin-top:20px;}
    .thumblist span{display:block;width:35%;margin:auto;}
        .thumb{width:100%;}
        .thumblist a{margin-bottom:20px;display:block;}

JavaScript

function handleFileSelect(evt) {
                                var files = evt.target.files;
                                for (var i = 0, f; f = files[i]; i++) {
                                  if (!f.type.match('image.*')) {
                                    continue;
                                  }
                                  var reader = new FileReader();
                                  reader.onload = (function(theFile) {
                                    return function(e) {
                                        $countImg = i++;
                                        var span = document.createElement('span');
                                        span.innerHTML = ['<img class="thumb" id="thumb', $countImg, '" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                                        document.getElementById('list').insertBefore(span, null);
                                        var del = document.createElement('span');
                                        del.innerHTML = ["<a href=\"#\" onclick=\"$('#thumb", $countImg, "').remove(); $(this).remove(); return false\" >Удалить</a>"].join('');
                                        document.getElementById('list').insertBefore(del, null);
                                    };
                                  })(f);
                                  reader.readAsDataURL(f);
                                }
                              }
                            document.getElementById('files').addEventListener('change', handleFileSelect, false);