JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
                <li><img src="images/yellow.gif" alt="Yellow"></li>
                <li><img src="images/orange.gif" alt="Orange"></li>
                <li><img src="images/purple.gif" alt="Purple"></li>
                <li><img src="images/blue.gif"   alt="Blue">  </li>
                <li><img src="images/pink.gif"   alt="Pink">  </li>
                <li><img src="images/green.gif"  alt="Green"> </li>
                <li><img src="images/black.gif"  alt="Black"> </li>
                <li><img src="images/gray.gif"   alt="Gray">  </li>
                <li><img src="images/red.gif"    alt="Red">   </li>
            </ul>

CSS

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

ul li{
    flex: 1;
}