JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll">
    <ul>
        <li><a href="#"><img src="http://placekitten.com/400/350" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/500/350" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/300/350" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/300/300" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/400/400" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/400/350" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/400/250" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/200/350" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="http://placekitten.com/100/300" alt=""><span>Image Name</span></a></li>
    </ul>
</div>

CSS

#scroll {
width:665px;
margin:0px auto;
background:#ffffff;
overflow-y:hidden;
border:1px solid blue;
}
#scroll ul {
    margin:0; 
    padding:0;
    display:table;
    list-style:none;
}
#scroll li {
padding:10px 100px;
text-align:center;
display:table-cell;
    vertical-align:middle;
    border:1px solid #eee;
}
#scroll img {
border:0;
display:block;
margin:0px auto;
}

#scroll span {
padding:10px 0 0;
display:block;
}