JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div class='container'>
    <div class='row'>
        <div class='col-6-sm'>this is a test</div>
    </div>
</div>

JavaScript

var productData = '[{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":2,"name":"Designer","price":12,"color":"red"},{"id":3,"name":"Classic","price":14,"color":"yellow"},{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":4,"name":"Rimless","price":14,"color":"purple"},{"id":5,"name":"Glam & Sparkle","price":8,"color":"grey"}]';        
    
$(function() {
    var myjson = $.parseJSON(productData);
    $.each(myjson, function(i, el) {
        var myrow = $("<div class='row' />");
        var col1 = $("<div class='col-sm-4'>").text(el.id);
        var col2 = $("<div class='col-sm-4'>").text(el.name);
        var col3 = $("<div class='col-sm-4'>").text(el.color);
        myrow.append(col1);
        myrow.append(col2);
        myrow.append(col3);
        $('.container').append(myrow);
    });
    
});