JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-box">
      <img src="images/love-01.jpg"/>
        
      </div>
    
    <div class="content-box">
      <img src="images/love-05.jpg"/>
         
      </div>
    
    
    <div class="content-box">
      <img src="images/love-02.jpg"/>
         
      </div>
    
    <div class="content-box">
      <img src="images/love-03.jpg"/>
        
      </div>
    
    <div class="content-box">
      <img src="images/love-04.jpg"/>
        
      </div>

CSS

.content-box { width: 100px; height:100px; float: left;
    background-color:#569; margin:5px;
}
.color-1 {background-color:#567}
.color-2 {background-color:#667}
.color-3 {background-color:#767}
.color-4 {background-color:#867}
.color-5 {background-color:#967}
.color-6 {background-color:#257}
.color-7 {background-color:#869}
.color-8 {background-color:#425}
.color-9 {background-color:#358}
.color-10 {background-color:#268}

JavaScript

$('.content-box').each(function() {
    var number = 1 + Math.floor(Math.random() * 10);
    $(this).addClass("color-" + number.toString());
});