JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<div class="main"> 
<p>This Privacy Policy applies to all of the <a href="http://www.google.com/options/">products, services and websites</a> offered by Google Inc. or its subsidiaries or affiliated companies except Postini (<a href="http://www.google.com/a/help/intl/en/security/terms/new_privacy.html">Postini Privacy Policy</a>).
Sometimes, we may post product specific privacy notices or Help Center materials to explain our products in more detail. </p>
<p>If you have any questions about this Privacy Policy, please feel free to <a href="http://www.google.com/support/websearch/bin/answer.py?answer=151265&amp;hl=en">contact us</a> through our website or write to us at </p>
</div>










<ul class="colorchoice">
    <li class="black_c"><a></a></li>
    <li class="blue_c"><a></a></li>
    <li class="red_c"><a></a></li>
</ul>

CSS

body {background-color: #fff;color:#000}
.main { width:200px}
.bg1 { background-color:#000}
.bg2 { background-color:#00F}
.bg3 { background-color:#F00}
.colorchoice { list-style:none; display:inline-block}
.colorchoice li { float:left}
.black_c a , .blue_c a, .red_c a{ width:20px; height:20px; display:block; margin:1px; cursor:pointer}
.black_c a {background-color:#000}
.blue_c a {background-color:#00F}
.red_c a {background-color:#F00}

JavaScript

$(document).ready(function(){
    
    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $.cookie('mycookie','bg1');
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $.cookie('mycookie','bg2');
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $.cookie('mycookie','bg3');
    }); 
    
    if ($.cookie('mycookie')) {
        $('.main').addClass($.cookie('mycookie'));
    }

});