JSFiddle - React, Tailwind, and code Playground

by envira

HTML

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

CSS

body { width:100%; height:100%; background:#222;}
.colorchanger{ width:200px; height:40px;line-height:40px; }
.colorchanger ul { margin: 0; padding:0; }
.colorchanger ul li { list-style:none;margin:0;display:inline;}
.colorchanger ul li a { padding: 10px;display:inline;}
.red { background: #e74c3c; }
.green { background: #2ecc71; }
.blue { background: #3498db; }
.yellow { background: #f1c40f; }

JavaScript

jQuery(document).ready(function($){
$('.colorchanger ul li').click( function() {
$('body').css('background',$(this).attr('.colchange'));  
});
});