JSFiddle - React, Tailwind, and code Playground

by heera

HTML

<div id="images"></div>

CSS

#images{
    text-align:center;
    margin:50px auto;
}

#images img {
    width:200px;
    height:200px;
}

#images div{
    margin:10px;
    display:inline-block;
}

JavaScript

var imageArray = [];
imageArray[0] = {
    src : "http://imaging.nikon.com/lineup/dslr/d5100/img/sample/img_01.png",
    caption : "Image caption for image-01"
};
imageArray[1] = {
    src : "http://imaging.nikon.com/lineup/dslr/d5100/img/sample/img_02.png",
    caption : "Image caption for image-02"
};


var containner = document.getElementById('images');
for(x = 0; x < imageArray.length; x++) {
    var img = new Image();
    img.src = imageArray[x].src;
    
    var span = document.createElement('span');
    span.style.display = 'block';
    span.innerHTML = imageArray[x].caption;
    
    var div = document.createElement('div');
    div.appendChild(img);
    div.appendChild(span);
    containner.appendChild(div);
}