JSFiddle - React, Tailwind, and code Playground
HTML
<div align="center" class="wrapper">
<div align="center" class="content">
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="divider"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
<div class="beers"></div>
</div>
<div>
CSS
.wrapper{
width:100%;
}
.content{
width:960px;
height:500px;
}
.beers{
position: relative;
width: 166px;
display:inline-block;
margin-right: 5px;
height: 107px;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
border: 1px dotted #e46a10;
}
.divider{
display: block;
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
}