JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>header</h1>
</header>
<section>
    <div class="container clearfix">
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
        <div class="item"> ITEM1 </div>
    </div>
</section>
<footer>
    <h1>footer</h1>
</footer>

CSS

header,footer{
    padding:10px;
    border:1px solid red;
    text-align:center;
}
section{
     border:1px solid gold;
}
.container{
    position:relative;
    width:1000px;
    margin:10px auto;
}
.item{
    float:left;
    width:200px;
    margin-right:10px;
    margin-bottom:10px;
    border:1px solid red;
    padding:30px;
    position:relative;
    text-align:center;
    font-size:30pt;
}
.clearfix{
    clear:both;
}
.clearfix:after{
    clear:both;
    display:table;
    content:"";
}
/* use mediaquries */

@media print and (max-width:420px){
    .item{
        color:red;
    }
}
@media  print and (min-width: 321px) and (max-width:960px){
    .item{
        color:green;
    }
}
@media print and (min-width: 720px) and (max-width:1024px){
    .item{
        color:blue;
    }
}
@media print and (min-width:1024px){
    .item{
        color:orchid;
    }
}