JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="test">
    
</div>

CSS

div {
    height: 100px;
    margin: 0;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

.clearfix {
    height: 0;
}

JavaScript

var tempData = [
    {
        type: 'div',
        classNames: 'red',
        content: '1'
    },
    {
        type: 'div',
        classNames: 'blue',
        content: '2'
    }
];

function render (arr) {
    var $content = $('.test'),
        html = '';
    
    arr.forEach(function (item) {
        html += '<' + item.type + ' class="' + item.classNames + '">';
        html += item.content;
        html += '</' + item.type + '>';
        
        html += '<div class="clearfix"></div>';
    });
    
    $content.append(html);
}

render(tempData);