JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        howtoshots - test
    </title>
    </head>
<body>
<div class="content-wrap">
    <div class="container" id="container">
        <div class="content-nav">
            <div  data-spy="affix" data-offset-bottom="300">
               <ul>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
               </ul>
            </div>
        </div>
        <div class="content-main">
            <div class="content-inner">
                <p>
                    
                    
                </p>
            
        </div>
    </div>
</div>
</div>
<div class="fulldivider"></div>
<div class="footer">
    <div class="footertop">
        <div class="container">
            <div class="footerul"><ul>
                <li class="ultitle">About</li>
                <li><a href="#">About the Editor</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
            <ul>
                <li class="ultitle">About</li>
                <li><a href="#">About the Editor</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
       ...

CSS

.container,.navbar-static-top .container{
width:940px;
padding-left: 10px;
padding-right: 10px;
}

.container {
margin-right:auto;
margin-left:auto;
zoom:1;
}

.container:before,.container:after {
display:table;
line-height:0;
content:"";
}

.container:after {
clear:both;
}

.content-wrap {
margin-top:50px;
margin-bottom:50px;
}
.fulldivider {
  box-shadow: 0px 1px 10px rgba(0,0,0,.1);
border-bottom: 1px solid #000;
height: 1px;
}
.content-main {
float:left;
width:760px;
}

.content-nav {
float:left;
margin-top:40px;
width:180px;
height: 100%;
}

.content-nav-inner,.affix {
  position: fixed;
  width: 180px;
  float: left;
}
.content-nav ul {
  margin-left: 5px;
}
.content-inner {
background:none repeat scroll 0 0 #FFF;
border:1px solid #000;
position:relative;
z-index:100;
padding:50px;
}


.content-nav li {
list-style:none outside none;
margin-left:0;
margin-bottom:0;
}

.content-nav li a {
text-decoration:none;
box-shadow:0 1px 0 #FFF;
color:#000;
display:block;
font-size:15px;
font-weight:300;
padding-bottom:8px;
padding-top:11px;
position:relative;
transition:all .2s ease-in-out 0;
width:180px;
}

.footerul {
  width: 800px !important;
  margin: 0 auto;
}
.footerul ul{
 float: left;
 list-style: none;
 padding-top: 25px;
 padding-bottom: 25px;
 margin-right: 30px;
}
.ultitle {
font-weight: 35px;
font-size: 18px !important;
padding-bottom: 10px !important;
}
.footerul ul li {
  line-height: 25px;
}
.footerul ul li a {
font-size: 15px;
}
.footerul ul li a:hover {
border-bottom:1px dotted;
}
.footerul ul.lastul {
  margin-right: 0px;
}
.footer {
  /*background-color: #e5e5e5;*/
  border-top: 1px solid #ffffff;
  background: #fff;
}