JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<ul class="class__ul">
<li class="class__li">
<a href="#" class="">
<img src="http://imgdataserver.com/items/SUME210C_sm.jpg" class="">
</a>
<a href="#">
<span class="title"> Some Title Long Long Long </span>
</a>
</li>
<li class="class__li">
<a href="#" class="">
<img src="http://imgdataserver.com/items/SUME210C_sm.jpg" class="brand__categories__box_collect__img">
</a>
<a href="#">
<span class="title"> Some Title </span>
</a>
</li>
<li class="class__li">
<a href="#" class="">
<img src="http://imgdataserver.com/items/SUME210C_sm.jpg" class="">
</a>
<a href="#">
<span class="title"> Some Title </span>
</a>
</li>
<li class="class__li">
<a href="#" class="">
<img src="http://imgdataserver.com/items/SUME210C_sm.jpg" class="">
</a>
<a href="#">
<span class="title"> Some Title </span>
</a>
</li>
</ul>
</div>
CSS
.class__ul{
padding: 0;
padding-top: 5px;
list-style-type: none;
max-height: 185px;
overflow: auto;
}
.class__li{
display: inline-block;
margin-left: 2%;
margin-bottom: 12px;
min-width: 180px;
}
.class__li {width: 180px;}
.title{
color: #333333;
font: bold 15px arial;
text-decoration: none;
cursor: pointer;
}
.container{
margin-top: 15px;
display: block;
position: relative;
}