JSFiddle - React, Tailwind, and code Playground

by dreamyguy

JavaScript

// calculate viewport width
function responsive(){
    var w = parseInt($(window).innerWidth());
    if (w <= 480) { var scaffolding = 'mobile'; };
    if (w > 480 && w <= 768) { var scaffolding = 'mobile-to-tablet'; };
    if (w > 768 && w <= 980) { var scaffolding = 'tablet'; };
    if (w > 980) { var scaffolding = 'desktop' };
    return scaffolding;
}
// run responsive on document ready (just for show the potential, really...)
$(document).ready(function() {
    responsive();
});
// run responsive on window resize
$(window).resize(function (){
    // debug
    console.log(responsive());
    // run code on different responsive breakpoints
    if (responsive() == 'mobile') {
        $('body').css('background','green')
    };
    if (responsive() == 'mobile-to-tablet') {
        $('body').css('background','blue')
    };
    if (responsive() == 'tablet') {
        $('body').css('background','magenta')
    };
    if (responsive() == 'desktop') {
        $('body').css('background','red')
    };
});