JSFiddle - React, Tailwind, and code Playground

HTML

<div id="servicesGrid">

    <div class="service">
				
        <div class="serviceContent">
			
            <div style="margin-left:auto; margin-right:auto">
			
                <h1 style="font-size:40px; font-family:'Effra-Light'; margin-bottom:-10px">Service</h1>
					
                <h4>Lorem ipsum dolor sit amet</h4>
							
                </br>
							
                <a href="#contactUs" class="button" alt="Find Out More Button">Find Out More</a>
					
            </div>
				
        </div>
				
    </div>
    
</div>

CSS

#servicesGrid
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.service
{
	width:24.85%;
	height:45%;
	background:#262626;
	display:block;
	float:left;
	margin:0 0.2% 0 0;
	text-align:center;
}

#servicesGrid .service:nth-of-type(1)
{
	width:100%;
	margin:0 0 0.2% 0;
  height:80%;
}

#servicesGrid .service:nth-of-type(5)
{
	margin-right:0;
}

.serviceContent
{
	margin:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	color:#fff;
	text-align:center;
}

.button
{
	color:#fff;
	border:2px solid #fff; 
	border-radius:15px;
	padding:10px 20px 10px 20px;
	text-transform:uppercase;
	font-family:'Effra-Regular';
	text-decoration:none;
	transition:all linear 0.3s;
	-webkit-transition:all linear 0.3s;
	-moz-transition:all linear 0.3s;
}

.button:hover
{
	color:#000;
	background:#fff;
}