JSFiddle - React, Tailwind, and code Playground

HTML

<div class="products-list">
  <a class="product-item" href="#"></a>
  <a class="product-item" href="#"></a>
  <a class="product-item" href="#"></a>
  <a class="product-item" href="#"></a>
  <a class="product-item" href="#"></a>
</div>

CSS

div.products-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
div.products-list a{
	position: relative;
	display: block;
	flex-basis: 30%;
	margin-bottom: 30px;
  height: 200px;
  background: lightgrey;
}