JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<ul id="items"></ul>

CSS

* {
    box-sizing: border-box;
}

#items {
    margin: 0;
    padding: 0;
    list-style: none;
}

#items li {
    float: left;
    width: 25%;
    text-align: center;
    margin-bottom: 1em;
}

#items span {
    display: block;
}

JavaScript

$(function() {
    
    var oldTime = new Date();
    
    var MAX = 1200;
    var markup = "";
    
    for(var i = 0; i < MAX; i++) {
        markup += '<li>' + '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>' + 
            '<span>Item Label</span>' + '</li>';
    }
    
    $('#items').html(markup);
    
    var newTime = new Date();
    
    console.log("Time to render: " + (newTime - oldTime) + "ms");
        
});