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>
<body>
<div class="patterns">
<span>Background Patterns</span>
<ul class="backgrounds">
<li class="bg1"></li>
<li class="bg2"></li>
<li class="bg3"></li>
<li class="bg4"></li>
<li class="bg5"></li>
<li class="bg6"></li> 
</ul>
</div>
<div class="images">
<span>Background images</span>
<ul class="backgrounds">
<li class="bg7"></li>   
<li class="bg8"></li>         
<li class="bg9"></li>         
<li class="bg10"></li>         
<li class="bg11"></li>                                                     
</ul>  
</div>
    </body>

CSS

body {
background: #EEE;
color: #000;
}

/* BACKGROUNDS PATTERNS */
.backgrounds li {
  display:inline-block;
  width:40px;
  height:40px
}

.backgrounds li.bg1 { background-image: url(http://subtlepatterns.com/patterns/food.png); }
.backgrounds li.bg2 { background-image: url(http://subtlepatterns.com/patterns/geometry2.png); }
.backgrounds li.bg3 { background-image: url(http://subtlepatterns.com/patterns/giftly.png); }
.backgrounds li.bg4 { background-image: url(http://subtlepatterns.com/patterns/green_cup.png); }
.backgrounds li.bg5 { background-image: url(http://subtlepatterns.com/patterns/halftone.png); }
.backgrounds li.bg6 { background-image: url(http://subtlepatterns.com/patterns/dark_leather.png); }
.backgrounds li.bg7 { background-image: url(http://i.imgur.com/aaAyFCZ.jpg);background-size: cover !important;background-repeat: no-repeat !important; background-position: top center !important; }
.backgrounds li.bg8 { background-image: url(http://i.imgur.com/dWuyQlE.jpg);background-size:cover;background-repeat:no-repeat; background-position: top center !important; }
.backgrounds li.bg9 { background-image: url(http://i.imgur.com/KVApk9P.jpg);background-size:cover;background-repeat:no-repeat; background-position: top center; }
.backgrounds li.bg10 { background-image: url(http://i.imgur.com/0h5Wobf.jpg);background-size:cover;background-repeat:no-repeat; background-position: top center; }
.backgrounds li.bg11 { background-image: url(http://i.imgur.com/RGElXdy.jpg);background-size:cover;background-repeat:no-repeat; background-position: top center; }

JavaScript

jQuery(document).ready(function($) {
$('.backgrounds li').click(function(){
		$colbgSrc = $(this).css('background-image');
		if ($(this).attr('class') == 'bgnone')
			$colbgSrc = "none";
		$('body').css('background-image',$colbgSrc);
        if ($(this).parents("div.images").length) {
            $('body').css('background-repeat','no-repeat');
            $('body').css('background-size', '100%');
        } else {
            $('body').css('background-repeat','repeat');   
            $('body').css('background-size', '');
        }
		$.cookie('background', $colbgSrc);
		$.cookie('backgroundclass', $(this).attr('class').replace('active',''));
		$(this).addClass('active').siblings().removeClass('active');
	});     
     $(function(){
		$colbgSrc = $.cookie('background');
		$('body').css('background-image',$colbgSrc);
		$('.backgrounds').find('li.' + $.cookie('backgroundclass')).addClass('active');
	});
});