JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Yellow"></li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Orange"></li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Purple"></li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Blue"> </li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Pink"> </li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Green"> </li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Black"> </li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Gray"> </li>
    <li><img src="http://dummyimage.com/100x100/cccccc/fff.png" alt="Red"> </li>
</ul>

CSS

ul{
    display: flex;
    flex-wrap: wrap;
    width: 40%;
    height: 40%;
    border: 1px solid red;
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
}

ul li{
    /* flex: 1; */
    margin: 2px;
}