JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div.wrapper {
    width:100%;
    border:3px solid red;
}
div.clear {
    clear:both;
}
div.box-wrapper {
    float:left;
    margin:10px 0;
    height:100px;
    width:20%;
}
div.box-wrapper-33 {
    width:33%;
}
div.box-wrapper-25 {
    width:25%;
}
div.box {
    border:1px solid black;
    width:80px;
    height:100px;
    margin:auto;
}

JavaScript

$(window).resize(function(){
    resize_wrapper();
});

function resize_wrapper() {
    if($('.wrapper').width() < 400)
    {
        $('.box-wrapper').each(function(){
            $(this).removeClass().addClass('box-wrapper box-wrapper-33');
        });
    }
    
    if($('.wrapper').width() >= 400 && $('.wrapper').width() < 600)
    {
        $('.box-wrapper').each(function(){
            $(this).removeClass().addClass('box-wrapper box-wrapper-25');
        });
    }

    if($('.wrapper').width() > 600)
    {
        $('.box-wrapper').each(function(){
            $(this).removeClass().addClass('box-wrapper');
        });
    }    
}