JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.4.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<script src="http://calebjacob.com/tooltipster/js/jquery.tooltipster.js"></script>
<script src="http://calebjacob.com/tooltipster/js/scripts.js"></script>
<link rel="stylesheet" href="http://calebjacob.com/tooltipster/css/tooltipster.css">
<script src="http://calebjacob.com/tooltipster/js/prettify.js"></script>
<div id="color-container">
    <div id="sidebar-menu-background" class="item-color e2e sidebar background tooltip" title="Sidebar menu background"></div>
    <div id="sidebar-menu-button-background" class="item-color e2e sidebar background tooltip" title="Sidebar menu button background"></div>
    <div id="sidebar-menu-button-border" class="item-color e2e sidebar border tooltip" title="Sidebar menu button border"></div>
    <div id="sidebar-menu-button-text" class="item-color e2e sidebar text tooltip" title="Sidebar menu button text color"></div>
    <div id="sidebar-menu-button-hover" class="item-color e2e sidebar selected tooltip" title="Sidebar menu button hover/selected"></div>
    <div id="sidebar-folder-image" class="item-color e2e sidebar image tooltip" title="Siderbar folder image"></div>
    <div id="sidebar-search-image" class="item-color e2e sidebar image tooltip" title="Sidebar magnifying glass image"></div>
    <div id="sidebar-favorites-image" class="item-color e2e sidebar image tooltip" title="Sidebar favorites image"></div>
    <div id="sidebar-dropdown-background" class="item-color e2e sidebar background tooltip" title="Sidebar dropdown background"></div>
    <div id="sidebar-dropdown-input-border" class="item-color e2e sidebar border tooltip" title="Sidebar dropdown input border"></div>
    <div id="sidebar-dropdown-input-text" class="item-color e2e sidebar text tooltip"...

CSS

body a{text-decoration:none;}
#this-hex {
    font-size:14px;
}
.color-match{border: 1px solid #DADADA;}

.e2e-filters {
    display:none;
    font-size:10px;
    margin-left:20px;
}
.basic-filters {
    font-size:10px;
    margin-left:20px;
}
.item-color {
    height: 100px;
    width: 100px;
    float:left;
}
.filter-selected {background-color: #444;}
.sub-filter-selected {background-color: #444;}
#color-container {
    margin-left: 150px;
}
#sidebar-menu-background {
    background: #EDEDED;
}
#sidebar-menu-button-background {
    background: #F5F5F5;
}
#sidebar-menu-button-border {
    background: #BBBBBB;
}
#sidebar-menu-button-text {
    background: #646464;
}
#sidebar-menu-button-hover {
    background: #E6E6E6;
}
#sidebar-folder-image {
    background: #7A7A7A;
}
#sidebar-search-image {
    background: #5E5E5E;
}
#sidebar-favorites-image {
    background: #767676;
}
#sidebar-dropdown-background {
    background: #EEEEEE;
}
#sidebar-dropdown-input-border {
    background: #C1C1C1;
}
#sidebar-dropdown-input-text {
    background: #999999;
}
#sidebar-dropdown-button-text {
    background: #999999;
}
#sidebar-pipeline-background {
    background: #FAFAFA;
}
#sidebar-pipeline-selected {
    background: aliceBlue;
}
#sidebar-pipeline-border {
    background: #DCDCDC;
}
#sidebar-pipeline-folder-text {
    background: #777777;
}
#top-nav-background {
    background: #FFFFFF;
}
#top-nav-border {
    background: #C1C1C1;
}
#top-nav-selected-background {
    background: #0086DD;
}
#top-nav-selected-text {
    background: #FFFFFF;
}
#top-nav-link {
    background: #0D78BE;
}
#stage-link-color {
    background: #0D78BE;
}
#stage-header-text {
    background: #FFFFFF;
}
#stage-page-background {
    background: #F7F7F7;
}
#stage-header-background {
    background: #0690E5;
}
#stage-stage-background {
    background: #FCFCFC;
}
#stage-initiative-background {
    background: #FFFFFF;
}
#stage-initiative-selected {
    background: #F0F8FF;
}
#stage-initiative-text {
   ...

JavaScript

$(function(){
var hexDigits = new Array

("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
    
    
    var $container = $('#color-container');
    $container.isotope({
      // options
      itemSelector : '.item-color',
      layoutMode : 'fitRows',
      //filter: '.background'
    });
    
    $container.delegate( '.item-color', 'click', function(){
        var color = $(this).css('background-color')
        $('.item-color').each(function(){
            $(this).height(100);
            $(this).width(100);
            var itemColor = $(this).css('background-color');
            $(this).removeClass('color-match');
            if (itemColor == color){
               $(this).addClass('color-match');
               $(this).animate({
                  "width": 200,
                  "height":200
                }, { 
                  duration: 20, 
                  complete: function(){
                      $container.isotope('reLayout'); }
                });
            }
        })
        $(this).animate({
          "width": 200,
          "height":200
        }, { 
          duration: 5, 
          complete: function(){
                
              $container.isotope('reLayout'); }
        });
    });
            
    
  $('#filters-basic a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      if ($(this).parents('#e2e-filter').length) {
          $('.e2e-filters').show();
          $('#show-all-filter').removeClass('filter-selected');
          $('#e2e-filter').addClass('filter-selected');
          $('.basic-filters').removeClass('sub-filter-selected');
         ...