JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imageinput"><input type="file" id="fily" class="imageup" name="jackfile" multiple /></div>
<div id="imagesholder"></div>
<div id="selectedimages"></div>

CSS

#featuredimagesubmit{
	border-style: solid;
	border-width: 4px;
	padding: 5px;
	border-collapse:collapse;
    
}
.box-image{
    display: inline-block;
    top: 5px;
    
}
.image-box-text{
    display: inline-block;
    position: relative;
    margin-left: 10px;  
    font-size:20px;
    top: -10px;
    max-width: 80%;

}

.image-box{
    max-width: 300px;
	padding: 5px 5px 0px 5px;
	border: 1px solid #000;
	color: #4d4d4d;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 0 6px 14px -6px #fff;
	-webkit-box-shadow: inset 0 6px 14px -6px #fff;
	box-shadow: inset 0 6px 14px -6px #fff;
	text-shadow: 0px 1px -1px rgba(255, 255, 255, 0.5);
    background: -webkit-linear-gradient(#00FF33, #00CC00);
background: -o-linear-gradient(#00FF33, #00CC00); 
background: -moz-linear-gradient(00FF33, #00CC00); 
background: linear-gradient(00FF33, #00CC00); 
}

.image-box-full{
    max-width: 300px;
	padding: 5px 5px 0px 5px;
	border: 1px solid #000;
	color: #4d4d4d;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 0 6px 14px -6px #fff;
	-webkit-box-shadow: inset 0 6px 14px -6px #fff;
	box-shadow: inset 0 6px 14px -6px #fff;
	text-shadow: 0px 1px -1px rgba(255, 255, 255, 0.5);
    background: -webkit-linear-gradient(#FF0000, #FF3300);
background: -o-linear-gradient(#FF0000, #FF3300); 
background: -moz-linear-gradient(#FF0000, #FF3300); 
background: linear-gradient(#FF0000, #FF3300); 
    
}

.image-box-fail{

    max-width: 300px;
	padding: 5px 5px 0px 5px;
	border: 1px solid #000;
	color: #4d4d4d;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 0 6px 14px -6px #fff;
	-webkit-box-shadow: inset 0 6px 14px -6px #fff;
	box-shadow: inset 0 6px 14px -6px #fff;
	text-shadow: 0px 1px -1px rgba(255, 255, 255, 0.5);
    background: -webkit-linear-gradient(#FF0000,...

JavaScript

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL('image/jpg')));               
    });
    return deferred.promise();    
}



function readFile(file) {
    var reader = new FileReader();
    var deferred = $.Deferred();
 
    reader.onload = function(event) {
        deferred.resolve(event.target.result);
    };
 
    reader.onerror = function() {
        deferred.reject(this);
    };
 
    if (/^image/.test(file.type)) {
        reader.readAsDataURL(file);
    } else {
        reader.readAsText(file);
    }
 
    return deferred.promise();
}

var i=1;
var maximages=4;

jQuery(document).on('change', '.imageup', function(event){
    
    var imagecount=jQuery('#imagesholder').find('.image-box').length;
    var length= this.files.length;
    var images=[];
    var processKey=0;
    
    jQuery.each(event.target.files, function(key, value){
        //check extension
 var extension= value.name.substring(value.name.lastIndexOf('.') + 1).toLowerCase();
	    var allowedExtensions = ['png', 'jpg', 'jpeg', 'gif'];
		if( allowedExtensions.indexOf(extension) == -1 ) {
        console.log('not valid');   
        jQuery('#imagesholder').append('<div id="delete'+i+'">'+'<div class="image-box-fail"><div class="image-box-text">'+value.name+'is not an image!</div><input type="image" src="http://testserverdavideec.mx.nf/wp-content/uploads/2014/04/success_close.png" class="deletebutton"  id="delete/i'+i+'"/></div></div>');
        i++;
        return;
        }
        
        // number of images control. 
        imagecount++;
        if(imagecount > maximages) {
            var...