JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap">
    
    <div class="head-wrap">
    
        <header class="group">
        
            <a class="logo" href="#">
                <img src="images/logo-trademark.jpg" alt="Trademark Visual" />
            </a>
            
            <nav>            
            
                <ul  class="main-nav">
                    <li><a class="selected" href="index.html">Sign Type</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="team.html">People</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>    
                
                <div id="options" class="combo-filters">
                        
                    <div class="option-combo location">
                      <ul class="filter option-set group level-one" data-filter-group="location"> 
                        <li class="hidden"><a href="#filter-location-any" data-filter-value="" class="selected">any</a>
                        
                          <li><a href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a>
                        
                          <li><a href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a>
                      </ul>
                    </div>
                  
                    <div class="option-combo illumination">
                      <ul class="filter option-set group level-two" data-filter-group="illumination"> 
                        <li class="hidden"><a href="#filter-illumination-any" data-filter-value="" class="selected">any</a>
                        
                          <li><a href="#filter-illumination-illuminated" data-filter-value=".illuminated" class="trigger-three">illuminated</a>
                        
                          <li><a...

CSS

/*===================================================================================================
    MAIN STYLE  |  Author: Chris Perryman
=====================================================================================================*/

.page-wrap {
    width:970px; 
    margin:0px auto 20px auto;
}

.head-wrap {
    height:295px;
}



/*======================================
    HEADER
========================================*/

header {
    position:fixed;
    width:950px;
    padding:100px 10px 80px 10px;
    background-color:#ffffff;
    z-index:10;
}

header .logo {
    display:block;
    float:left;
    margin:20px 0px 0px 75px;
}

header nav {
    position:relative;
    float:right;
    width:470px;
    margin-right:75px;
    text-align:right;
    text-transform:uppercase;
}

header nav a {
    color:#666666;
}

header nav a.selected {
    color:#000000;
}

header nav li {
    margin-bottom:5px;
}

header nav ul.main-nav {
    float:right;
}

header nav #options ul {
    float:right;
    margin-right:20px;
    padding-right:10px;
}

header nav #options ul ul {
    float:left;
    margin-left:20px;
}

header nav #options li.hidden {
    display:none;
}

header nav ul.level-two, header nav ul.level-three {
    display:none;
}


/*======================================
    CONTENT
========================================*/

section.content {
    clear:both;
    min-height:500px;
}


/*======================================
    TEMPLATE PAGE STYLES
========================================*/

.project-main {
    float:left;
    width:630px;
    height:475px;
    margin:0px 10px 0px 10px;
    background-color:#000000;
}

.project-options {
    float:right;
    width:320px;
}

.padding {
    margin-left:10px;
}

.grid-box ul h2 {
    margin-bottom:20px;
    font-size:14px;
}

.grid-box.services ul li {
    margin-bottom:40px;
    text-transform:none;
}

.grid-box ul li {
    width:150px;
    min-height:150px;
    float:left;
    margin:0px 10px 10px...

JavaScript

/**
 * Isotope v1.5.21
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2012 David DeSandro / Metafizzy
 */
(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={csstransforms:function(){return!!i},csstransforms3d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return...