JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="colormenu">
<ul class="colchange">
<li class='red'><a href='#' class='click' data-color='#e74c3c'></a></li>
<li class='green'><a href='#' class='click' data-color='#2ecc71'></a></li>
<li class='blue'><a href='#' class='click' data-color='#3498db'></a></li>
<li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a></li>
<li class='black'><a href='#' class='click' data-color='#222'></a></li>
<li class="links"><a href="#">Changer</a></li>
</ul>
</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;}

.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; }
.links {float:right;}
.linkcolor { color: #999; }

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')); 
});
});