JSFiddle - React, Tailwind, and code Playground

by bellamystudio

HTML

<section class="alpha g-11 omega" id="library-filters">
    <div class="alpha g-6"  id="library-options">
            <ul id="filters" class="option-set clearfix" data-option-key="filter">
                <li><a href="#filter" data-option-value=".ccskills" class="selected">Creative &amp; Cultural Skills</a></li>
                <li><a href="#filter" data-option-value=".other">External Publications</a></li>
                <li><a href="#filter" data-option-value="*">All</a></li>
            </ul>
    </div>
    <div class="g-5 omega">
        <select id="industry-dropdown">
            <option value="" selected>Select an industry</option>
            
            <option value=".creative-industries">Creative industries</option>
            
            <option value=".craft">Craft</option>
            
            <option value=".cultural-heritage">Cultural Heritage</option>
            
            <option value=".design">Design</option>
            
            <option value=".literary-arts">Literary Arts</option>
            
            <option value=".music">Music</option>
            
            <option value=".performing-arts">Performing Arts</option>
            
            <option value=".visual-arts">Visual Arts</option>
                                    
        </select>
    </div>
    </section>
    <section id="library">
    
    <div class="publication creative-industries ccskills ">
        <div class="left_listing_image">
            
                           <img src="http://creative-blueprint.co.uk/images/template/image_coming_soon.jpg" width="96" height="135" />
                    </div>
        <div class="left_listing">
            <h3>
                <a href="http://creative-blueprint.co.uk/library/item/the-qualifications-blueprint-a-qualifications-strategy-for-the-creative-and" class="pub_name">The Qualifications Blueprint: A Qualifications Strategy for the Creative and Cultural Industries in</a>
                <span...

CSS

[class*="g-"] {
  position: relative;
  float: left;
  display: inline;
  margin-left: 10px;
  margin-right: 10px; }
.row {
  margin-bottom: 20px; }
  
.border {padding-right:9px; margin-right:0px; border-right:1px solid #dedede}
.colborder {padding-right:30px; margin-right:29px; border-right:1px dotted #dedede}

/* Nested Column Classes */
.alpha                  { margin-left: 0; }
.omega                  { margin-right: 0; }

/* Base Grid */
.g-1                    { width: 40px;  }
.g-2                    { width: 100px; }
.g-3                    { width: 160px; }
.g-4                    { width: 220px; }
.g-5                    { width: 280px; }
.g-6                    { width: 340px; }
.g-7                    { width: 400px; }
.g-8                    { width: 460px; }
.g-9                    { width: 520px; }
.g-10                   { width: 580px; }
.g-11                   { width: 640px; }
.g-12                   { width: 700px; }
.g-13                   { width: 760px; }
.g-14                   { width: 820px; }
.g-15                   { width: 880px; }
.g-16                   { width: 940px; }

.left_listing_image {float:left; width:15%; margin-right:5%}
.left_listing {float:left; width:79%}

/**** Isotope Filtering ****/
.isotope-item { z-index:2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index:1; }

/**** Isotope CSS3 transitions ****/
.isotope,.isotope .isotope-item { -webkit-transition-duration:.8s; -moz-transition-duration:.8s; transition-duration:.8s; }
.isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; transition-property:height, width; }
.isotope .isotope-item { -webkit-transition-property:0 opacity; -moz-transition-property:0 opacity; transition-property:transform, opacity; }

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition { -webkit-transition-duration:0; -moz-transition-duration:0;...

JavaScript

/**
 * Isotope v1.5.01
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2011 David DeSandro / Metafizzy
 */
/*jshint curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, undef: true */
/*global Modernizr: true, jQuery: true */
(function(a,b,c){"use strict";var d=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},e="Moz Webkit Khtml O Ms".split(" "),f=function(a){var b=document.documentElement.style,c;if(typeof b[a]=="string")return a;a=d(a);for(var f=0,g=e.length;f<g;f++){c=e[f]+a;if(typeof b[c]=="string")return c}},g=f("transform"),h=f("transitionProperty"),i={csstransforms:function(){return!!g},csstransforms3d:function(){var a=!!f("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"),g=b('<div id="modernizr" />').appendTo("html");a=g.height()===3,g.remove(),e.remove()}return a},csstransitions:function(){return!!h}};if(a.Modernizr)for(var j in i)Modernizr.hasOwnProperty(j)||Modernizr.addTest(j,i[j]);else a.Modernizr=function(){var a={_version:"1.6ish: miniModernizr for Isotope"},c=" ",d,e;for(e in i)d=i[e](),a[e]=d,c+=" "+(d?"":"no-")+e;b("html").addClass(c);return a}();if(Modernizr.csstransforms){var k=Modernizr.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+") "}},l=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},h,i={},j;f[c]=d,b.extend(e,f);for(h in e)j=e[h],i[h]=k[h](j);var l=i.translate||"",m=i.scale||"",n=l+m;b.data(a,"isoTransform",e),a.style[g]=n};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){l(a,"scale",b)},get:function(a,c){var...