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>
    <ul class="themechange">
        <li><a href='#' class="boxed">box</a>

        </li>
        <li><a href='#' class="fluid">fluid</a>

        </li>
    </ul>
</div>
<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>
<div id="container">I contain</div>

CSS

[theme=boxed] #container, [theme=boxed] .wrap {
    width:960px;
}
[theme=fluid] #container, [theme=fluid] .wrap {
    width:90%;
}
#container {
    background:orange;
    height:50px;
}
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 ($) {
    $.fn.cookieChoose = function (attr, name) {
        var value = $.cookie(name)
        return this.on("click change", function () {
            value = $(this).attr(attr)
            $("html").attr(name, value)
            $.cookie(name, value, {
                expires: 365,
                path: '/'
            });
        }).filter(function () {
            return $(this).attr(attr) === value
        }).click()
    }
    $('.colchange li').cookieChoose('class', 'class')
    $('.themechange a').cookieChoose('class', 'theme')
});