JSFiddle - React, Tailwind, and code Playground
HTML
<section id="menu">
<h1>Title</h1>
<p>Texty text lorem ipsum blah blah</p>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/1/" />
<span class="caption">Image 1 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/2/" />
<span class="caption">Image 2 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/3/" />
<span class="caption">Image 3 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/4/" />
<span class="caption">Image 4 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/5/" />
<span class="caption">Image 5 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/6/" />
<span class="caption">Image 6 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/7/" />
<span class="caption">Image 7 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/8/" />
<span class="caption">Image 8 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/9/" />
<span class="caption">Image 9 here</span></a>
</div>
<div class="cake">
<a href="#"><img src="http://lorempixel.com/400/400/food/10/" />
<span class="caption">Image 10 here</span></a>
</div>
</section>
JavaScript
$('div.cake:nth-of-type(1n)').css('border-bottom', '3px solid red');
$('div.cake:nth-of-type(2n)').css('border-bottom', '3px solid blue');
$('div.cake:nth-of-type(3n)').css('border-bottom', '3px solid green');
$('div.cake:nth-of-type(4n)').css('border-bottom', '3px solid yellow');