JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container1">
<div class="container">

<div class="flex-container">

<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>

</div>

</div>

CSS

body {margin:0;}
.container1 {max-width:960px;margin:auto;}
.container {max-width:940px;margin:0 10px;background-color:#dedede;}

.flex-container {margin: 0 -5px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    }
    
    .box {width:300px;height:180px;background-color:#999;margin: 0 5px 20px 5px;}
    
    @media screen and (max-width: 960px) {
      .flex-container {-webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;}
      }