JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    margin: 0 auto; /* center container */
    width: 1000px;
    font-size: 0; /* remove inline-block white space; http://stackoverflow.com/q/5078239/3597276 */
    padding-left: 0; /* remove list padding */
    list-style-type: none;
    border: 1px dashed #333;
    background-color: lightyellow;
}

li {
    display: inline-block;
    font-size: 60px; /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
    color: #333;
    border: 1px solid gray;
    background-color: lightgreen;   
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }