JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<p>See console!</p>

CSS

html:after {
    content:'desktop';
    background: red;
    padding: 20px;
    color: white
}
@media screen and (min-width: 640px) and (max-width: 930px) {
    html:after {
        content:'tablet';
        background: green;
    }
}
@media screen and (max-width: 639px) {
    html:after {
        content:'mobile';
        background: black;
    }
}

JavaScript

/**!
 * trivago jquery.viewporter
 * http://www.trivago.de/
 *
 * Copyright 2015, trivago GmbH
 * Innovation Center Leipzig
 *
 * @fileoverview cool file
 * @author Thomas Horster
 *
 */

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery.
        define(['jquery'], function (jQuery) {
            return factory(jQuery);
        });
    } else {
        // No AMD. Register plugin with global jQuery object.
        factory(jQuery);
    }
}(function ($) {
    'use strict';
    var Viewporter = function () {
        var view, resizeListener, vp = {};

        // Returns a function, that, as long as it continues to be invoked, will not
        // be triggered. The function will be called after it stops being called for
        // N milliseconds. If `immediate` is passed, trigger the function on the
        // leading edge, instead of the trailing.
        vp.debounce = function (func, wait, immediate) {
            var timeout;
            return function () {
                var context = this,
                    args = arguments;
                var later = function () {
                    timeout = null;
                    if (!immediate) {
                        func.apply(context, args);
                    }
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) {
                    func.apply(context, args);
                }
            };
        };

        // get the current view and trigger viewchange event if it changed since last query
        vp.getView = function () {
            var oldView = view;
            try {
                view = window.getComputedStyle(document.documentElement, ':after').getPropertyValue('content').replace(/["']/g, '');
            } catch (error) {
                view =...