JSFiddle - React, Tailwind, and code Playground

HTML

<section class="video">
			<div class="container">
				<div class="row">
					<div class="col-md-12 text-center">
					
						<ul class="footer-nav">
							<li><a href="#">Contact</a></li>
							<li><a href="#">Press</a></li>
							<li><a href="#">Careers</a></li>
							<li><a href="#">Business</a></li>
							<li><a href="#">Careers</a></li>
							<li><a href="#">Business</a></li>
						</ul>
						
					</div>
				</div>
			</div>
		</section>

CSS

section.video i {
    margin-right: 10px;
    color: #323a45;
    vertical-align: middle;
    font-size: 50px;
    -webkit-transition: color 300ms ease-in-out;
    transition: color 300ms ease-in-out;
}
section.video h1 {
    font-weight: 400;
    font-size: 20px;
}
section.video {
    padding: 60px 0;
    background: rgb(40, 70, 102) url('../img/back.png') no-repeat center center;
    background-size: cover;
	background-attachment: fixed;
}
section.video a {
    color: #323a45
}
section.video a:hover, section.video a:focus {
    color: #73d0da;
    text-decoration: none;
}
section.video a:hover i, section.video a:focus i {
    color: #73d0da
}

section.video ul {
    margin-top: 30px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

section.video li {
    float: left;
	  text-align: center;
    margin-right: 1%;
    list-style: none;
    text-transform: uppercase;
    font-weight: 400;
}
section.video li a {
    color: #3f6184
}