JSFiddle - React, Tailwind, and code Playground

HTML

<div id="serviceNav">
	<div id="serviceNavInner">
		<div id="serviceNavBlock1" class="iblock">
			<div class="total-center" id="serviceNavBlock1Wrap">
				<span class="blockDW">Overview</span>
				<a href="http://localhost"><button class="buttonInv2">Solutions Overview</button></a>
			</div>
		</div><div id="serviceNavBlock2" class="iblock">
			<div class="servNavItemWrap"><a href="http://localhost:8080/profile.php">
				<img src="" alt="Aluminum Profile">
				<span class="servNavItemTitle hGc block">Aluminum Profile</span>
			</a></div><div class="servNavItemWrap"><a href="#">
				<img src="" alt="Aluminum Components">
				<span class="servNavItemTitle hGc block">Components</span>
			</a></div><div class="servNavItemWrap"><a href="http://localhost:8080/solution/linear-motion.php">
				<img src="" alt="Linear Motion">
				<span class="servNavItemTitle hGc block">Linear Motion</span>
			</a></div><div class="servNavItemWrap"><a href="http://localhost:8080/solution/material-handling.php">
				<img src="" alt="Material Handling">
				<span class="servNavItemTitle hGc block">Material Handling</span>
			</a></div><div class="servNavItemWrap"><a href="http://localhost:8080/solution/enclosures.php">
				<img src="" alt="Enclosures">
				<span class="servNavItemTitle hGc block">Enclosures</span>
			</a></div><div class="servNavItemWrap"><a href="#">
				<img src="" alt="Hard Guarding">
				<span class="servNavItemTitle hGc block">Hard Guarding</span>
			</a></div><div class="servNavItemWrap"><a href="#">
				<img src="" alt="Workstations">
				<span class="servNavItemTitle hGc block">Workstations</span>
			</a></div><div class="servNavItemWrap"><a href="#">
				<img src="" alt="Machine Structures">
				<span class="servNavItemTitle hGc block">Machine Structures</span>
			</a></div>
		</div>
	</div>
</div>

CSS

.block {
	display: block;
}
.iblock {
	display: inline-block;
	vertical-align: top;
}
.hGc {
	color: #b82222;
	font-size: 1rem;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	font-weight: 800;
	font-family: 'Muli', sans-serif;
	text-align: center;
	margin-bottom: 5px;
	line-height: 1.4em;
}
#serviceNav {
    width: 100%;
    top: 0;
    z-index: 99;
    position: fixed;
    background-color: rgba(0,0,0,.9);
    height: 60vh;
    transition: all .4s;
	padding: 20px 0;
}
#serviceNavInner {
	margin: 0 5%;
	height: 100%;
	position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
	width: 33%;
	height: 100%;
	border-right: 1px solid rgba(255,255,255,.5);
	position: relative;
}
#serviceNavBlock1Wrap {
	width: 80%;
	text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
	width: 66.6%;
	height: 100%;
	margin: 10px auto;
	position: relative;
}
.servNavItemWrap {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	margin-bottom: 50px;
	text-align: center;
	cursor: pointer;
}
.servNavItemWrap img {
	width: 75px;
	height: 75px;
	-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
	-webkit-transition: all 0.25s;transition: all 0.25s;
    -webkit-transform: scale(1.1);transform: scale(1.1);
}
.servNavItemWrap a {
	text-decoration: none;
	outline: none;
}
.servNavItemTitle {
	margin-top: 5px;
}
.servNavItemWrap:hover .servNavItemTitle {
	color: #FFF;
}