JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>header</h1>
</header>
<section>
    <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
    <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
     <div class="pull-left"></div>
    <div class="clearfix"></div>
</section>
<footer>
    <h1>footter</h1>
</footer>

CSS

header{
    border:1px solid #ddd;
}

.clearfix{
    clear:both;
}
section{
    border:1px solid gold;
    padding:20px 0 20px 2px;
}
.pull-left{
    float:left;
    padding:20px 0;
    width:185px;
    border:1px solid #ddd;
}
footer{
   border:1px solid #ddd;
}
@media  screen and (min-width: 321px) and (max-width:960px){
    .pull-left{
        background-color:green;
    }
    
}
@media screen and (min-width: 720px) and (max-width:1024px){
    .pull-left{
       background-color:yellow;
    }
}

@media screen and (min-width:1024px){
    .pull-left{
       background-color:blue;
    }
    
}