JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divId"></div>

CSS

body{
		margin:0px;
		padding:0px;
		}
		.single{
			width:210px;
			height:130px;
			background-color:purple;
			margin-left:8px;
			margin-bottom:5px;
			display:inline-block;
			position:relative;
		
		.any_name{
			color:white;
			margin-left:5px;
			position:absolute;
			font-family:arial;
			font-size:13px;
			letter-spacing:1px;
			bottom:10px;
		}
		#divId{
			width:60%;
			margin:0 auto;
		}

JavaScript

var data = [
    {
        text: 'some data',
        link: 'http://www.google.com/',
        imagePath: 'some/path/img.jpg'
    },
    {
        text: 'something else',
        link: 'http://www.facebook.com/',
        imagePath: 'some/path/img2.jpg'
    }
];

$.each(data, function(key, value){
    var newDiv = $('<div/>')
                    .addClass('single')
                    .attr('id', 'my_test_' + (key + 1));
    
    var textInsideDiv = $('<span/>')
                            .addClass('blabla')
                            .text(value.text);
    
    var imageInsideDiv = $('<img/>')
                    .addClass('someclass')
                    .attr('src', value.imagePath);
    
    var linkWrapper = $('<a/>')
                 .addClass('someotherclass')
                 .attr('href', value.link);
                 
    newDiv
        .append(imageInsideDiv)
        .append(textInsideDiv);
    linkWrapper.append(newDiv);
    
    $('#divId').append(linkWrapper);
});