JSFiddle - React, Tailwind, and code Playground

by j08691

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 {
    display:inline-block;
    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 */