JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="colormenu">
<ul class="colchange">
<li class='red'><a href="#"></a></li>
<li class='green'><a href="#"></a></li>
<li class='blue'><a href="#"></a></li>
<li class='yellow'><a href="#"></a></li> 
<li class='black'><a href="#"></a></li>
</ul>
</div>

CSS

body { width:100%; height:100%; background-color:#222;}
.colormenu{ width:auto; height:40px;line-height:40px;background:#FFF;padding: 10px; }
.colormenu ul { margin: 0; padding:0; }
.colormenu ul li { list-style:none;margin:0;display:inline-block;}
.colormenu ul li a { padding: 10px 20px;display:inline;box-shadow: 0px -1px 2px rgba(0,0,0,0.2);}
.red { background: #e74c3c; }
.green { background: #2ecc71; }
.blue { background: #3498db; }
.yellow { background: #f1c40f; }
.black { background: #222; }

JavaScript

jQuery(document).ready(function($){   
var xColors =['#e74c3c','#2ecc71','#3498db','#f1c40f', '#222'];    
$('.colchange li').click( function() {    
$('body').css('background', xColors[$(this).index()] );        
});    
});