JSFiddle - React, Tailwind, and code Playground

HTML

<section class="home-banner">
	<div class="banner-area">
		<div class="container">
			<div class="banner-item banner-item--top">
				<p class="t-white coloured-underline">Experts in the permanent and contract placement of <br /> ex-Forces and technical candidates</p>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<h1 class="banner-title"><span class="banner-title__text">Find Your</span></h1>
					<h1 class="banner-title"><span class="banner-title__text">Perfect Civilian Career</span></h1>
				</div><!-- /.col-lg-12 -->
			</div><!-- /.row -->
			<div class="row">
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<a class="button" href="#">I'm looking for a job</a>
				</div><!-- /.col-lg-6 -->
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<a class="button" href="#">I'm looking for skilled staff</a>
				</div><!-- /.col-lg-6 -->
			</div><!-- /.row -->
		</div><!-- /.container -->
	</div><!-- /.banner-center -->
</section><!-- /.home-banner -->

CSS

.home-banner {
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	background-image: url(../img/banners/banner-home.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
	margin-top: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-area {

}

.banner-item {
	flex: 1;
}

.banner-item--top {
	align-self: flex-start;
}

.banner-center {

}

.banner-title {
	color: @white;
	background: @dark;
	display: inline-block;
	margin-bottom: 0.2em;
	padding: 1em;
}

.banner-title__text {
	font-family: @fatfrank;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 600;
}

JavaScript

// Home Banner
	var window_height = $(window).height();
	$('.home-banner').height(window_height / 4 * 3);