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; blablabla@blabla.com.br &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

html, body {
    height:100%;
}
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(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    border:1px solid red;
}
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}