JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-wrap">
	<div class="header-container">
		<header class="wrapper clearfix">
			<h1 class="title"><a href="/">h1 Header</a></h1>
			<nav role="navigation" class="top-navigation-left">
				<div class="top-navigation-left-block">
                	<a class="top-nav-link fltlt" href="#">Menu item one</a>
                    <div class="top-nav-spacer fltlt"></div>
				</div>
				<div class="top-navigation-left-block">
                	<a class="top-nav-link fltlt" href="#">Menu item two two</a>
                    <div class="top-nav-spacer fltlt"></div>
                </div>
				<div class="top-navigation-left-block">
                	<a class="top-nav-link fltlt" href="#">Menu item three 333 333 </a>
                </div>
			</nav>
			<nav role="navigation" class="top-navigation-right">
				<div class="top-navigation-right-block">
                	<a class="top-nav-link fltrt" href="#">Gallery</a>
                    <div class="top-nav-spacer fltrt"></div>
                </div>
				<div class="top-navigation-right-block">
                	<a class="top-nav-link fltrt" href="#">Information</a>
                    <div class="top-nav-spacer fltrt"></div>
                </div>
				<div class="top-navigation-right-block">
                	<a class="top-nav-link fltrt" href="#">+1 000 000 0000 / +1 000 000 0000</a>
                </div>
			</nav>
		</header>
	</div>
</div>

CSS

/* ==========================================================================
   Boilerplate
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	font-family:Arial, Helvetica, sans-serif;
}

::-moz-selection {
    background: #3db11d;
    text-shadow: none;
	color: #FFF;
}

::selection {
    background: #3db11d;
    text-shadow: none;
	color: #FFF;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   User styles
   ========================================================================== */

body, html {
	width:100%;
	height:100%;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.fltlt {
	float:left;
}

.fltrt {
	float:right;
}

#main-wrap {
	margin:0 auto;
	width:80%; 
	min-width:960px; 
	max-width:1800px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background-color:#FFF;
	position:relative;
}

.wrapper {
	margin:0 auto;
}

.header-container {
	padding:24px 0;
	position:relative;
}

.title {
	position:absolute;
	z-index:2;
	*z-index:2;
	margin-top:0px;
	left:50%;
	margin-left:-100px; /* Must be logo_width/2 */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background:url(/assets/img/logo.png) no-repeat;
    border: 1px dashed #EEE;
}

.title a {
	outline:none;
	border:none;
	display:block;
	height:29px !important; /* Must be equal to logo.png*/
	width:200px !important; /* Must be equal to logo.png*/
	margin:0...

JavaScript

jQuery(document).ready(function ($){

    var calcWidth = $('#main-wrap').width();
    $('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);
    $('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0);
	$('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);
	$('.title').css('margin-top', (calcWidth / 960 + 1)|0);
  
  $(window).on('resize', function (){
  
    var calcWidth = $('#main-wrap').width();
    $('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);
    $('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0);
	$('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);
	$('.title').css('margin-top', (calcWidth / 960 + 1)|0);
    console.log('resize');
  
  });

});