JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="/favicon.png" alt="Whatever works"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
        <li><a href="#"><img src="/favicon.png" alt="Anything else"/></a>

        </li>
    </ul>
</div>

CSS

ul {
    margin: 0;
    padding: 0;
}
li{
    margin:20px;
    padding:0px;
    float:left;
    width:100px;
    height: 80px;
}
img{
    width: 100%;
}

JavaScript

vectorImagens = [
    'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTt6WTOl7w2gkrkGq5Gz6qoj_-2ww1ZKrNR38TGs5MnfWixkQOs',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStAlGN9q3MvECd1rtFZQ-odG4TeDrMmNxzWIjfeOLWQD99ilU00Q',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1-aMkFav8M9Cd9Vn0p3L9DTICPGiVlltg48b_quIfS7svlnAwmA',
    'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRNfZqnHn9yv1VBdvZ0qzMt6a0RKjqBMXRYaHzxe8GTRT9iuaZgVw'];
var contador = 0;
$('#ri-grid img').each(function(){
    if(!vectorImagens[contador]) contador = 0;
    console.log(this);
    this.setAttribute('src', vectorImagens[contador]);
    contador ++;
});