JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.wrapper{
    overflow:auto;
}

.box{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
    margin:5px;
    border:2px solid black;
}

.edge{
    border-color:yellow;
}

JavaScript

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxSize = boxes.first().outerWidth(true);

$(window).resize(function(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxSize);
    
    boxes
        .removeClass('edge')
        .filter(':nth-child('+breakat+'n)')
        .addClass('edge');
});