JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="color" data-background="ffffff" data-style="background1"></div>
  <div class="color" data-background="000000" data-style="background2"></div>
  <div class="color" data-background="00ff00" data-style="background3"></div>
  <div class="color" data-background="EDff00" data-style="background4"></div>
  <div class="color" data-background="FFA700" data-style="background5"></div>
  <div class="color" data-background="ff0000" data-style="background6"></div>
  <div class="color" data-background="ff00ff" data-style="background7"></div>
  <div class="color" data-background="0000ff" data-style="background8"></div>
</div>

CSS

body {
  height: 100vh;
}
.row {
  background: #a0a0a0;
  border-radius: 15px;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.25);
  display: inline-block;
  font-size: 0;
  margin: 10px;
  padding: 3px;
}

.color {
  border: 2px solid transparent;
  border-radius: 50%;
  display: inline-block;
  font-size: 0;
  opacity: 0.3;
  height: 20px;
  width: 20px;
}

.color:hover {
  opacity: 0.6;
}

.color.active {
  border: 2px solid #ffffff;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.color > div {
  border-radius: 50%;
  box-shadow: inset 0 0 20px 0px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  display: block;
  height: 20px;
  width: 20px;
}

.background1 {
  background: linear-gradient(to bottom, #607D8B 0%, #9E9E9E 100%);
}

.background2 {
  background: linear-gradient(to bottom, #607D8B 0%, #455A64 100%);
}

.background3 {
  background: linear-gradient(to bottom, #009688 0%, #4CAF50 100%);
}

.background4 {
  background: linear-gradient(to bottom, #FFEB3B 0%, #FF9800 100%);
}

.background5 {
  background: linear-gradient(to bottom, #FF9800 0%, #FF5722 100%);
}

.background6 {
      background: linear-gradient(to bottom, #F44336 0%, #E91E63 100%);
}

.background7 {
      background: linear-gradient(to bottom, #9C27B0 0%, #673AB7 100%);
}

.background8 {
  background: linear-gradient(to bottom, #1DC7EA 0%, #4091ff 100%);
}

JavaScript

var STYLE = {
  a: $(document),
  cookie: {
    set: function(a, b, c) {
      var e;
      if (c) {
        var d = new Date();
        d.setTime(d.getTime() + (c * 24 * 60 * 60 * 1000));
        e = " ; expires=" + d.toGMTString();

      } else {
        e = "";

      }
      document.cookie = a + " = " + b + e + "; path=/";

    },
    get: function(a) {
      var b = a + "=",
        d = document.cookie.split(';');

      for (var i = 0; i < d.length; i++) {
        var c = d[i];

        while (c.charAt(0) === ' ') {
          c = c.substring(1, c.length);

        }

        if (c.indexOf(b) === 0) {
          return c.substring(b.length, c.length);

        }

      }
      return null;

    },
    del: function(a) {
      STYLE.cookie.set(a, "", -1);

    }

  },
  ready: function() {
    $('[data-background]').each(function() {
      var a = $(this);
      a.html('<div style="background: #' + a.data('background') + ';"></div>');
    });

    var b = STYLE.cookie.get('body_style');
    if (undefined !== b) {
      STYLE.cookie.set('body_style', b, 365);
      $('body').removeAttr('class').addClass(b);
      $('[data-style="' + b + '"]').addClass('active');

    }

  }

}

STYLE.a.on('click', '[data-background]', function() {
  var a = $(this).data('style');
  if (a !== STYLE.cookie.get('body_style')) {
    STYLE.cookie.set('body_style', a, 365);
    $('body').removeAttr('class').addClass($(this).data('style'));
    $('[data-style]').removeClass('active');
    $(this).addClass('active');
  }

}).ready(function() {
  STYLE.ready();

});