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'></li>
        <li class='green'></li>
        <li class='blue'></li>
        <li class='yellow'></li>
        <li class='black'></li>
    </ul>
</div>
<div class="bar2">this is Bar 2</div>
<div class="bar3"></div>

CSS

body {
    background: #E2E2E2;
    font-family:Tahoma, sans-serif;
}
.bigbar {
    background: #FFF;
    height:50px;
    line-height:50px;
    padding:0px 20px;
}
.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;
    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;
}
.bar2, .bar3 {
    background: #FFF;
    height:50px;
    line-height:50px;
    padding:0px 20px;
    box-shadow: 0px 0px 8px #111;
    margin-top:30px;
}
html.red .bar2{color:pink;}
html.green .bar2{color:teal;}
html.blue .bar2{color:orange;}
html.yellow .bar2{color:brown;}
html.black .bar2{color:violet;}

html.red .bar3{background:pink;}
html.green .bar3{background:teal;}
html.blue .bar3{background:orange;}
html.yellow .bar3{background:brown;}
html.black .bar3{background:violet;}

JavaScript

jQuery(function ($) {
    var color = $.cookie('color');
    $('.colchange li').on('click', function (e) {
        color = $(this).attr('class')
        $("html").attr("class", color)
        $.cookie('color', color, {
            expires: 365,
            path: '/'
        });
        return false;
    }).filter(function () {
        return $(this).attr('class') === color
    }).click()
});