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 {
	width: 75%;
	height: 75%;
	margin: auto;
    border: 1px solid blue;
    text-align: center;
    padding:20px;
    verflow:hidden;
}
.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;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
	color: white; background: #666666; opacity: .8;
	z-index: 1000;
}