JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://sitesource.ru/demo/jquery/select-bg/js/jquery.cookie.js"></script>
<div id="panel-backgroundg">
 <div class="button-bg bg1" id="bg1"></div>
    <div class="button-bg bg2" id="bg2"></div>
    <div class="button-bg bg3" id="bg3"></div>
    <div class="button-bg bg4" id="bg4"></div>
    <div class="button-bg bg5" id="bg5"></div>
    <div class="button-bg bg6" id="bg6"></div>
    <div class="button-bg bg7" id="bg7"></div>
</div>

CSS

body {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}
#panel-bg {
  width: 600px;
  margin: 30px auto;
}
.button-bg {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  float: left;
  margin: 7px 3px;
  cursor: pointer;
}
.active,
.button-bg:hover {
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  border: 1px solid #fff;
}
.bg1 {background: #fff url("http://glamorouslymommy.com/wp-content/uploads/2012/09/small-background.jpg");}
.bg2 {background: #fff url("http://www.colourbox.com/preview/1741080-275769-abstract-floral-background-with-small-flowers-on-pink.jpg");}
.bg3 {background: #fff url("http://image.shutterstock.com/display_pic_with_logo/439435/123635431/stock-vector-seamless-background-with-small-polka-dot-pattern-123635431.jpg");}
.bg4 {background: #fff url("http://www.aljamarkennels.com/Images/DKBlue-SMALL-background.jpg");}
.bg5 {background: #fff url("http://www.colourbox.com/preview/2110012-621776-the-grass-is-green-small-close-up-background.jpg");}
.bg6 {background: #fff url("http://hd.wallpaperswide.com/thumbs/black_background_metal_hole_very_small-t2.jpg");}
.bg7 {background: #fff url("http://www.colourbox.com/preview/2562340-279598-beautiful-blue-big-and-small-drops-background.jpg");}

JavaScript

$(document).ready(function() {
  if($.cookie('body-bg')) {
    var bgBody = $.cookie('body-bg');
    $('body').addClass(bgBody);
    $('#'+bgBody).addClass('active');
  }
  $('.button-bg').click(function() { 
    var bgBody = $('body').attr('class'),
        bgId   = $(this).attr("id");
    $('body').removeClass(bgBody).addClass(bgId);
    $('.button-bg').removeClass('active');
    $(this).addClass('active');
    $.cookie('body-bg', bgId, {expires: 365});    // äîáàâëÿåì êóêó íà ãîä
  });
});