JSFiddle - React, Tailwind, and code Playground

HTML

<div class="listadoproductos">
<div class="cajaproducto">
	<div class="image-cropper">
    	<a href="news.php?tab=1&amp;p=1"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
    </div>
    <div class="divnombrecajaproducto">
		<span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=1">Product 1</a></span>
    </div>
    <div class="municipiocajaproducto">
		<span class="municipiocaja">Primer municipio</span>        
    </div>

</div>
<div class="cajaproducto">
	<div class="image-cropper">
    	<a href="news.php?tab=1&amp;p=2"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
    </div>
    <div class="divnombrecajaproducto">
		<span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=2">This is a far larger product name</a></span>
    </div>
    <div class="municipiocajaproducto">
		<span class="municipiocaja">In a far longer city name</span>        
    </div>

</div>
<div class="cajaproducto">
	<div class="image-cropper">
    	<a href="newshop.php?tab=1&amp;p=3"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
    </div>
    <div class="divnombrecajaproducto">
		<span class="nombrecajaproducto"><a href="newshop.php?tab=1&amp;p=3">Third product</a></span>
    </div>
    <div class="municipiocajaproducto">
		<span class="municipiocaja">Third city</span>        
    </div>

</div>
<div class="cajaproducto">
	<div class="image-cropper">
    	<a href="newshop.php?tab=1&amp;p=7"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
    </div>
    <div class="divnombrecajaproducto">
		<span class="nombrecajaproducto"><a href="news.php?tab=1&amp;p=7">Another product with a relatively long name</a></span>
    </div>
    <div class="municipiocajaproducto">
		<span class="municipiocaja">no village</span>        
    </div>

</div>
<div class="cajaproducto">
	<div class="image-cropper">
    	<a href="newshop.php?tab=1&amp;p=8"><img src="main_small.jpg" class="profile-pic" width="90%"></a>
    </div>
    <div...

CSS

.listadoproductos {
    display: block;
    max-width: 992px;
    flex-wrap: wrap;
    text-align: center;
}
.cajaproducto {
    display: inline-block;
    width: 17.8%;
    min-width: 150px;
    height: 310px;
    padding: 4px;
    margin-top: 10px;
    line-height: 1.42857143;
    background-color: #c596971f;
    border: 1px solid #ddd;
    border-radius: 4px;
}