JSFiddle - React, Tailwind, and code Playground
by TheJoeFletch
HTML
<div class="row">
<div class="sq-color c11"></div>
<div class="sq-color c12"></div>
<div class="sq-color c13"></div>
<div class="sq-color c14"></div>
</div>
<div class="row">
<div class="sq-color c21"></div>
<div class="sq-color c22"></div>
<div class="sq-color c23"></div>
<div class="sq-color c24"></div>
</div>
<div class="row">
<div class="sq-color c31"></div>
<div class="sq-color c32"></div>
<div class="sq-color c33"></div>
<div class="sq-color c34"></div>
</div>
<div class="row">
<div class="sq-color c41"></div>
<div class="sq-color c42"></div>
<div class="sq-color c43"></div>
<div class="sq-color c44"></div>
</div>
CSS
.row
{
width:520px;
height:120px;
border-color:#333;
border-width:1px;
}
.sq-color
{
margin: 2px;
width:120px;
height:120px;
float:right;
background-color:#6C0;
}
.mole
{
background-image:url(images.jpg);
background-color:purple;
}
JavaScript
var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
var random = items[Math.floor(Math.random()*items.length)]
$('.c'+random).addClass('mole');