JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Fine Cooking - Inspirations</title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="css/style.css" />  
  <link rel="stylesheet" href="css/hovers.css" />  
  <link rel="stylesheet" href="css/hovers_common.css" />  
  <link rel="stylesheet" type="text/css" href="css/page.css" media="all">

  


  <!-- scripts at bottom of page -->

</head>
<body class="homepage ">
  

  
  <section id="content" class="centered">
    

    <section id="options" class="clearfix">
          <div class="option-combo">
            <h2>Filter:</h2>
            <ul id="filter" class="option-set clearfix" data-option-key="filter">
              <li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
             <!--  <li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li> -->
              <li><a href="#maincourse" data-option-value=".maincourse">main courses</a></li>
              <li><a href="#sides" data-option-value=".sides">side dishes</a></li>
              <li><a href="#dessert" data-option-value=".dessert">desserts</a></li>
            </ul>
          </div>
          <!--
          <div class="option-combo">
            <h2>Sort:</h2>
            <ul id="sort" class="option-set clearfix" data-option-key="sortBy">
              <li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
              <li><a href="#original" data-option-value="original-order">original</a></li>
              <li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
            </ul>
          </div>
          -->
    </section>
  
  <div id="container" class="super-list variable-sizes clearfix">

  

    <!--  -->

    
<div class="element box2 maincourse">
  <img class="recipeImage"...

CSS

#container {
    width:990px;
    height: 550px !important;
    overflow: scroll;
}


#content {
    width:950px;
}

section, header, footer, aside {
    display:block;
}



/* Start: Recommended Isotope styles */

/**** 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: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, 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: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,...

JavaScript

/**
 * Isotope v1.5.17
 * 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 =...