JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="clearfix">
    <li><a href="#"><img src="http://fpoimg.com/100x150"></a></li>
    <li><a href="#"><img src="http://fpoimg.com/100x100"></a></li>
    <li><a href="#"><img src="http://fpoimg.com/100x75"></a></li>
</ul>

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    background:#eee;
    display: block;
    vertical-align:bottom;
}

li {
    float:left;
    padding:0px 5px;
}

a {
    display:block;
}

img {
    display:block;
    vertical-align:bottom;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */