JSFiddle - React, Tailwind, and code Playground

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

$("#prod-general > *").each(function (i, el) {
    setTimeout(function () {
        $(el).animate({'opacity': '1'}, 500);
    }, i * 100)
});