JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grandparent">
	<div class="parent">
		<!-- 1st row */ -->
		<div class="child">1-1</div>
		<div class="child">1-2</div>
		<div class="child">1-3</div>
		
		<!-- 2nd row */ -->
		<div class="child">2-1</div>
		<div class="child">2-2</div>
		<div class="child">2-3</div>
		
		<!-- 3rd row */ -->
		<div class="child">3-1</div>
		<div class="child">3-2</div>
		<div class="child">3-3</div>
        
        <div class="overlay">
            Overlaysdfds 
            line2sdf sdfdsf sdfsdf sfdsdf
            <P />line 3
         </div>	
	
    </div>
</div>

CSS

.grandparent {
    posttion: relative;
	height: 100%;
	width:100%;
	max-width:600px;
    
    margin: 0 auto;
    text-align:center;
	border: 1px solid green;
    overflow: hidden;
}

.parent {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}
.parent:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.child {
    posttion: relative;
    float:left;
    width: 30%;
    padding-bottom: 22%; 
    margin:1.66%;
    background-color: #1E1E1E;
    color: #ffffff;
}

.overlay {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%, -50%);    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
    color: white; background: #666666; opacity: .8;
}