JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Nav</title>
<style type="text/css">
/*<![CDATA[*/
* {margin:0; padding:0; font:normal 16px courier new}
#wrapper {width:798px; margin:0 auto}
#header {position:fixed; z-index:2; width:798px; height:100px; border-width:0px 1px 1px 1px; border-style:solid; border-color:grey; background:#fff}
#fixwrap {float:right; width:225px}
#fixed {position:fixed; z-index:1; width:225px; top:101px; height:100px; border-width:0px 1px 1px 1px; border-style:solid; border-color:grey; overflow:visible; background:#fff}
#content {width:550px; padding:110px 0 20px 0}
#header p, #fixed p, #content p {padding:15px; letter-spacing:1px; line-height:27px}
/*]]>*/
</style>
<!-- IE 6 Workaround http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie -->
</head><body>
<div id="wrapper">
<div id="header"><p>fixed Nav 1</p></div>
<div id="fixwrap">
<div id="fixed">
<p>fixed Nav 2</p>
</div>
</div>
<div id="content">
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content - fluid Content - fluid Content - fluid Content</p>
<p>fluid Content - fluid Content -...