JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<ul class="thumnails">
            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">How a Squad of Ex-Cops Fights Police Abuses</p>
            </li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">The Men's Rights Movement and the Women Who Love It</p>
            </li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p>
            </li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">6 Dumb Things Dan Snyder Has Said About the Name of His Football Team</p>
            </li>
        </ul>

CSS

.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0; 
margin: 12px auto;  
position: relative;
list-style: none;
background:black;
    
text-align: justify; /* <== add this */
}

.thumnails .img-thum {
width: 23%;
display: inline-block; 
padding: 0; 
margin: 0 auto; 
}


.thumnails .img-thum img {
display: inline-block; /* <== and this */
    
width: 100%;
padding: 0;
margin: 0;
}

.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
color:white;    
}


/*and this*/
.thumnails:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}