JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>
<div class="row">I'm a row.</div>

JavaScript

var colours = ['#ff5a5a', '#ffbe0d', '#00ddb8'];    
var used = [];

// for each section
$('.row').each(function(i){

  var color = colours.splice(~~(Math.random()*colours.length), 1)[0];
  used.push(color);
  $(this).css('background-color', color);
	
  if(used.length > 1) {
    colours.push(used.shift());
  }
});