JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div id="top-nav">
			<div class="container">
				<div class="row" id="top-contato">
					<div class="col-lg-6">
						<span><i class="fa fa-envelope-o"></i> &nbsp; [email protected] &nbsp; | &nbsp; <i class="fa fa-phone"></i> &nbsp; (YY) XXXX-XXXX</span>
					</div>
					<div class="col-lg-6">
						<nav id="top-midia-icons">
							<ul>
								<li>
									<a href="#"><i class="fa fa-facebook fa fa-lg"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-twitter fa fa-lg"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-google-plus fa fa-lg"></i></a>
								</li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</header>

	<section id="mid-content">
		<h1>Alan Naidon</h1>
	</section>

CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-image: url("../imgs/texture.jpg");
}
#top-nav {
  width: 100%;
  height: 50px;
  background-color: #383931;
}
#top-nav span {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
}
#top-nav #top-contato {
  padding: 10px 0;
}
#top-nav #top-midia-icons ul {
  list-style-type: none;
}
#top-nav #top-midia-icons ul li {
  display: inline;
  width: 50px;
  height: 50px;
  padding: 2px 10px;
}
#top-nav #top-midia-icons ul li a {
  width: 35px;
  height: 35px;
  background-color: #bcbeb1;
  border-radius: 50%;
  text-align: center;
  padding: 2px 10px;
  display: inline-block;
  color: white;
  text-decoration: none;
}
#top-nav #top-midia-icons ul li a i {
  margin-top: 10px;
}
#mid-content {
  width: 100%;
  height: calc(55%);
  height: -webkit-calc(55%);
  height: -moz-calc(55%);
    border:1px solid red;
    
}
#mid-content h1 {
  width: 300px;
  height: 250px;
  font-size: 58px;
  line-height: 1em;
  font-family: 'Oswald', sans-serif;
  margin: 100px auto 70px auto;
  color: white;
}