JSFiddle - React, Tailwind, and code Playground

CSS

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    .boxes {width:80%;
        margin:0 auto;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
        -ms-flex-flow: row wrap;    
        flex-flow: row wrap;
    }
    .box {
        width: 16%;
        border:1px solid white;
        background:#efefef;
        padding:20px;
        box-sizing: border-box;
        display: block;
        text-overflow: elipsis;
        overflow: hidden;
    }

    @media only screen and (max-width:800px) {
      .box{
        width:33%;
      }
    }

    @media only screen and (max-width:650px) {
      .box{
        width:50%;
      }
    }

    @media only screen and (max-width:400px) {
      .box{
        width:100%;
      }
    } 

    /* props */
    .top {
      text-align: center;
    }