JSFiddle - React, Tailwind, and code Playground

by afelixj

HTML

<div class="grid columns1">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
</div>
<div class="grid columns2">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
</div>
<div class="grid columns3">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
</div>
<div class="grid columns4">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
    <img alt="image" class="frame" src="https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/2091709/spam_illustration_spamamerican_halftonedef_kendrickkidd3_1x.jpg">
</div>
<div class="grid columns5">
    <img alt="image" class="frame"...

CSS

/*RESET*/
 html, body, div, section, article, span, figure, figcaption, caption, img, h1, h2, h3, h4, h5, h6, p, a, button, blockquote, pre, abbr, address, small, strong, sub, sup, ol, ul, li, fieldset, form, label, input, select, .select-dropdown-input, output, textarea, legend, table, tr, th, td, dl, dt, dd, footer, header, hgroup, aside, menu, nav, time, mark, audio, video, canvas, embed, iframe, object, hr {
    margin: 0;
    padding: 0;
    max-width: 100%;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: default;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*, *:before, *:after {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
}
html, body {
    height: 100%;
    width: 100%;
}
/*Touch action settings*/
 html, a, button, .button {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
/*HTML5 display-role reset for older browsers*/
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, a {
    display: block;
}
img {
    width: 100%;
}
/*Form elements reset*/
 textarea {
    resize: vertical;
}
::-webkit-search-decoration {
    display:none;
}
:focus {
    outline: none;
}
::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/*Lists*/
 ul, ol, ul ul, ol ul, ol ol, ul ol {
    margin: 0;
    list-style: none;
}
/*Tables*/
 table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-spacing:...

JavaScript

/* enquire.js v2.1.2 - Awesome Media Queries in JavaScript
 * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/enquire.js
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)*/
! function (a, b, c) {
    var d = window.matchMedia;
    "undefined" != typeof module && module.exports ? module.exports = c(d) : "function" == typeof define && define.amd ? define(function () {
        return b[a] = c(d)
    }) : b[a] = c(d)
}("enquire", this, function (a) {
    "use strict";

    function b(a, b) {
        var c, d = 0,
            e = a.length;
        for (d; e > d && (c = b(a[d], d), c !== !1); d++);
    }

    function c(a) {
        return "[object Array]" === Object.prototype.toString.apply(a)
    }

    function d(a) {
        return "function" == typeof a
    }

    function e(a) {
        this.options = a, !a.deferSetup && this.setup()
    }

    function f(b, c) {
        this.query = b, this.isUnconditional = c, this.handlers = [], this.mql = a(b);
        var d = this;
        this.listener = function (a) {
            d.mql = a, d.assess()
        }, this.mql.addListener(this.listener)
    }

    function g() {
        if (!a) throw new Error("matchMedia not present, legacy browsers require a polyfill");
        this.queries = {}, this.browserIsIncapable = !a("only all").matches
    }
    return e.prototype = {
        setup: function () {
            this.options.setup && this.options.setup(), this.initialised = !0
        },
        on: function () {
            !this.initialised && this.setup(), this.options.match && this.options.match()
        },
        off: function () {
            this.options.unmatch && this.options.unmatch()
        },
        destroy: function () {
            this.options.destroy ? this.options.destroy() : this.off()
        },
        equals: function (a) {
            return this.options === a || this.options.match === a
        }
    }, f.prototype = {
        addHandler: function (a) {
           ...