JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
 
.block{
    background: #7f180d;
    height: 100px;
    width: 100px;
}
 div{
    display: inline-block;
    padding: 10px
}

JavaScript

function generateColor(){
	var color = Math.floor(Math.random()*256*256*256);
  return '#' + color.toString(16);
}
var blocks = document.querySelectorAll('#blocks .block');

document.getElementById('blocks').addEventListener('click', function(e){
	if(e.target.classList.contains('block')){
  	var target = e.target,
  		  next = target.nextElementSibling,
  		  prev = target.previousElementSibling;
	
    [].forEach.call(blocks, function(block){
      block.style.background = '';
    });

    if(next){
      next.style.background = generateColor();
    }else{
      next = blocks[0];
      next.style.background = generateColor();
    }

    if(prev){
      prev.style.background = generateColor();
    }else{
      prev = blocks[blocks.length - 1];
      prev.style.background = generateColor();
    }
    
  }
});