JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="bigbar">
<a href='#' class='click' data-color='#e74c3c'>Red</a>
<a href='#' class='click' data-color='#2ecc71'>Green</a>
<a href='#' class='click' data-color='#3498db'>Blue</a>
<a href='#' class='click' data-color='#f1c40f'>Yellow</a>
<a href='#' class='click' data-color='#222'>Dark</a>
</div>
<div class="bar2">this is Bar 2</div>
<div class="bar3"></div>

CSS

body {background: #E2E2E2;}
.bigbar{ background: #FFF;height:50px;line-height:50px;padding:0px 20px;
}
.bar2, .bar3 { background: #FFF;height:50px;line-height:50px;padding:0px 20px;box-shadow: 0px 0px 8px #111;margin-top:30px;}

JavaScript

jQuery(document).ready(function($){ 
$('.click').on('click', function(e) {
$('body, .bar3').css('background', $(this).data('color')); 
$('a:link, .bar2').css('color', $(this).data('color')); 
});
});