JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.box {display:flex;flex-wrap:wrap;width:400px;}
.item {width:100px;background:#000000;color:#ffffff;}


@media screen and (max-width: 1000px) { 
.item {width:200px}
}
@media screen and (max-width: 500px) { 
.item {width:400px}
}