JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="prod-general">
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
				<div class="single-product">
				<img src="https://kiza.eu/media/gallery/2013/Red_Panda-IMG_2366.jpg">
                </div>
</div>

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
img{
    width: 100%;
    max-width: 100%;
}
#prod-general .single-product{
	opacity: 0;
	position: relative;
	float: left;
	margin: 0 10px 20px 10px;
	padding: 20px 0 15px 0;
    width: 30%;
	border: 1px solid rgb(204,204,204);
	text-align: center;
    overflow: auto;
}

JavaScript

var children = [];
		$("#prod-general").children().each(function() {
		    children.push(this);
		});

		function fadeThemOut(children) {
		    if (children.length > 0) {
		        var currentChild = children.shift();
		        $(currentChild).animate({
					'opacity': '1'},
					500, function() {
						//fadeThemOut(children);
				});
                setTimeout(function() {
                 fadeThemOut(children);
            },100);
		    }
		}
fadeThemOut(children);