JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="foo0">
	<li><div class="Brand"><img src="img/brand01.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand02.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand03.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand04.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand05.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand06.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand07.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand08.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand09.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand14.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand15.png" width="60" height="60" alt="Brand" /></div></li>
	<li><div class="Brand"><img src="img/brand16.png" width="60" height="60" alt="Brand" /></div></li>
</ul>

JavaScript

var productos = new Array(
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	"https://i.stack.imgur.com/pmC9u.png",
	
);


var divs = document.getElementsByClassName('Brand');

for(var i = 0; i < divs.length; i++){
	var img = divs[i].firstChild.src = productos[i];
}