JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="squares">
    <div>
        fsfas
    </div>
    <div>
        fsafsa
    </div>
    <div>
        fsafas
    </div>
    <div>
        fsfas
    </div>
    <div>
        fsafsa
    </div>
    <div>
        fsafas
    </div>
</div>

SCSS

.squares {
    div {
        background: blue;
        float: left;
    
        & + div {
            background: red;
            
            & + div {
                background: purple;
                
                & + div {
                    background: green;                    
                    
                    & + div {
                        background: black;
                        
                        & + div {
                            background: grey;
                        }
                    }
                }
            }
        }
    }
}

JavaScript

var $container = $(".squares");
var $squares = $container.children("div");
var breakpoints = [640, 1024, 1440];
var breakpointNames = ["mobile", "tablet", "desktop"];
var currentBreakpoint = breakpoints[0];

$(window).on("breakpoint", function(e, breakpoint) {
    currentBreakpoint = closestBreakpoint;
});

$(window).on("resize", function(e) {
    var closestBreakpoint = getClosestNumber(breakpoints, $(window).width());
    
    if (closestBreakpoint !== currentBreakpoint) {
                            
         $("body").removeClass(breakpointNames[breakpoints.indexOf(currentBreakpoint)]);
        
        currentBreakpoint = closestBreakpoint;
        $(window).trigger("breakpoint", currentBreakpoint);
    }
});

var getClosestNumber = function(array, number) {
    var closestNumber = array[0];
    
    for (var i = 0; i < array.length; i++) {
      if (closestNumber == null || Math.abs(array[i] - number) < Math.abs(closestNumber - number)) {
        closestNumber = array[i];
      }
    }
    
    return closestNumber;
}