JSFiddle - React, Tailwind, and code Playground

by trevor_davis

HTML

<ul class="diamonds">
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="diamond">
            <div class="content">
                Diamonds are forever
            </div>
        </a>
    </li>
</ul>

SCSS

@mixin respond-to($query) {
    @media only screen and #{$query}  {
        @content
    }
}

@mixin diamond-grid-breakpoint($query, $maxWidth, $n, $maxRow) {
    @include respond-to(#{$query}) {
        & {
            max-width: $maxWidth;

            > li {
                &:nth-child(#{$n}n+#{$maxRow + 1}) {
                    margin-left: 135px;
                }
                &:nth-child(#{$n}n+#{$maxRow}) {
                    margin-right: 0;
                }

                .csstransforms &:nth-child(n+#{$maxRow}) {
                    margin-top: -55px;
                }
            }
        }    
    }
}

body {
    font: Helvetica, Arial, sans-serif;
}

$diamondSize: 190px;

.diamonds {
    font-size: 0;
    margin: 0 auto;

    $diamondQuery1: '(min-width: 1340px)';
    $diamondQuery2: '(max-width: 1339px) and (min-width: 1072px)';
    $diamondQuery3: '(max-width: 1071px) and (min-width: 804px)';
    $diamondQuery4: '(max-width: 803px) and (min-width: 536px)';
    $belowDiamond: '(max-width: 535px)';
    $belowDiamondSize: 160px;

    @include diamond-grid-breakpoint($query: $diamondQuery1, $maxWidth: 1262px, $n: 9, $maxRow: 5);
    @include diamond-grid-breakpoint($query: $diamondQuery2, $maxWidth: 994px, $n: 7, $maxRow: 4);
    @include diamond-grid-breakpoint($query: $diamondQuery3, $maxWidth: 726px, $n: 5, $maxRow: 3);
    @include diamond-grid-breakpoint($query: $diamondQuery4, $maxWidth: 458px, $n: 3, $maxRow: 2);

    .csstransforms & {
        padding: 39px 0;

        @include respond-to($belowDiamond) {
            padding: 0;
            text-align: center;
        }
    }

    .no-csstransforms & {
        max-width: 1060px;
    }

    > li {
        display: inline-block;
        font-size: 14px;
        margin-right: 78px;
    }

    .diamond {
        background: #000;
        color: #fff;
        display: block;
        height: $diamondSize;
        overflow: hidden;
        position: relative;
        text-decoration: none;
  ...

JavaScript

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-csstransforms-shiv-cssclasses-testprop-testallprops-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransforms=function(){return!!D("transform")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var...