JSFiddle - React, Tailwind, and code Playground

by Will McKinley

HTML

<p>I am text.</p>

CSS

html { // same as full
    background: white;
    color: red;
    font-size: 1.4em;
}
html.mobile {
    background: blue;
    color: white;
    font-size: 1em;
}
html.tiny {
    background: red;
    color: white;
    font-size: 1em;
}

JavaScript

var pageTransitions = [['full',1600],['mobile',800],['tiny',400]]; // number shows minimum size - must be from high to low
function resize() {
    var target = 0;
    $.each(pageTransitions, function(index, pageTransition) {
        if(jQuery(window).width() > pageTransition[1]) {
            target = index;
            return false;
        }
    });
    $.each(pageTransitions, function(index, pageTransition) {
        $('html').removeClass(pageTransition[0]);
    });
    $('html').addClass(pageTransitions[target][0]);
}
resize();
jQuery(window).on('resize', function() {
    resize();
});