JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cf">
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/1" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/2" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/3" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/4" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/5" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/6" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/7" alt=""></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/300/nature/8" alt=""></a></li>


  </ul>

CSS

ul{
  list-style: none;
  padding: 0;
  width: 100%;
}
li {

  float:left;
  padding: 0;
  margin: 0;
  width: 25%;
}
img {
  width: 100%


.cf::after {
   content:'';
   display:block;
   clear:both;
 }