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;
var imagens = document.getElementById("ri-grid").getElementsByTagName("img");
for (var i = 0; i < imagens.length; i++) {
    if (!vectorImagens[contador]) contador = 0;
    imagens[i].setAttribute('src', vectorImagens[contador]);
    contador++;
};