JSFiddle - React, Tailwind, and code Playground

HTML

<div class="homepage-wrapper">
<div class="homepage-top-category-container">
	<div class="homepage-top-category-container-title">
		<span id="homepage-top-category-container-title">block title here</span>
	</div>
	<div class="homepage-top-category-container-list">
		<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
			block A
		</div>
		<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
			block B
		</div>
		<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
			block C
		</div>
		<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
			block D
		</div>
	</div>
</div>
	</div>

CSS

.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/ 
	background-color: green;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto; 
	}
.homepage-top-category-container-title{
	background-color: black;
	margin-bottom: 10px;
	}
#homepage-top-category-container-title{
	color: orange;
	}
.homepage-top-category-container-list{ /*This should be the container*/
  display:flex;
	height: auto;
	margin-left: auto;
	margin-right: auto; 
	background-color: yellow;
	}
.homepage-top-category-container-item{
	display: block;
	float: none;
	width: auto;
	height:auto;
	border: solid 1px black;
	}
  @media only screen and (min-width: 400px) {
        .homepage-top-category-container-item{
            width: 100%
        }
        .homepage-top-category-container-list{
          display:block
        }