JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contact-connect">
		<div id="contact-connect-box-container">
			<div class="contact-connect-box">
				<div class="connect-box-wrap">
				<h2 class="contact-connect-title">A</h2>
				<div class="contact-connect-description"><a href="tel:555555555">555.555.5555</a></div>
				</div>
			</div><div class="contact-connect-box">
			<div class="connect-box-wrap">
				<h2 class="contact-connect-title">B</h2>
				<div class="contact-connect-description">
					fdf fdf sd fdsf 
					<br>
					<div id="scroll" class="contact-connect-link">fds fdsf sdf dsf s</div>
					</div>
				</div>
			</div><div class="contact-connect-box">
			<div class="connect-box-wrap">
				<h2 class="contact-connect-title">C</h2>
				<div class="contact-connect-description">
					fds fds dfdsf 
				</div>
				</div>
			</div><div class="contact-connect-box">
			<div class="connect-box-wrap">
				<h2 class="contact-connect-title">D</h2>
				<div class="contact-connect-description">
        <div class="contact-connect-link">fdsfdsfdsfdsf </div>
				</div>
				</div>
			</div>
		</div>
	</div>

CSS

#contact-connect {
	width: 80%;
	height: auto;
	margin: 0 10%;
	padding: 80px 0;
}
#contact-connect-box-container {
	margin: 0 auto;
	width: auto;
}
.contact-connect-box {
	width: 25%;
	margin: 60px 0 0 0;
	display: inline-block;
	/*border: 1px solid black;*/
	vertical-align: top;
	opacity: 1;
	transition:1s; -webkit-transition:1s;
}
.connect-box-wrap {
	margin: 0 auto;
}
.contact-connect-box.fadeShow{
	opacity: 1;
	transform: translateY(-30px); -webkit-transform: translateY(-30px);
}
.contact-connect-title {
	font-size: 3.2em;
	padding-bottom: 20px;
}
.contact-connect-description {
	font-size: 1.2em;
	line-height: 2em;
	color: #333;
}
.contact-connect-link {
	color: #009CD0;
	cursor: pointer;
}
.contact-connect-link:hover {
	text-decoration: underline;
	color: red;
}