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;
}