JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a><a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/>
    </a> 
    </div>

CSS

#thumbs {   
    width: 100%;
    background: #F00;
     text-align: justify;
}
#thumbs:after {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  content: '';
}
#thumbs a {
    display: inline-block;
}