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-color: #E2E2E2;
    background-image: url(http://myskins.org/show/images/sol/thead.png);
}

.bigbar{ background-color: #FFF;height:50px;line-height:50px;padding:0px 20px;
}

.bar2, .bar3 { background-color: #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-color', $(this).data('color')); 
$('a:link, .bar2').css('color', $(this).data('color')); 
});
});