JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="buffer"></li>
    <li class="buffer"></li>
    <li class="buffer"></li>
    <li class="buffer"></li>
    <li class="buffer"></li>
</ul>

CSS

* {margin:0; padding:0;}
li {display:inline-block; height:100px; width:100px; background:salmon; margin:10px; line-height: 100px; vertical-align: top; position: relative; z-index: 1;}

ul{margin:0 auto; background:lightblue; text-align: center;}
.buffer {height: 0; line-height: 0; font-size: 0; margin: -110px 10px 0; z-index: 0; outline: 1px dashed black;}