JSFiddle - React, Tailwind, and code Playground
HTML
<body data-spy="scroll" data-target="#navbar">
<div id="navbar">
<ul class="nav">
<li><a href="#film1">11th November 2013</a></li>
<li><a href="#film2">25th December 2013</a></li>
<li><a href="#film3">11th August 2013</a></li>
</ul>
</div>
<div id="film1" class="box">
<h1>Available 11th November 2013</h1>
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div id="film2" class="box">
<h1>Available on 25th December 2013</h1>
<h2>Film Name</h2>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div id="film3" class="box">
<h1>Available 11th August 2013</h1>
<h2>Film Name</h2>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<div class="box">
<h3>Film Name</h3>
<p> Description of Film</p>
</div>
<script...
CSS
@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box{
margin: 20px; padding: 15px;
background: #eee;
height: auto;
padding-top:50px;
}
#navbar{
position: fixed;
top: 0; left: 20px;
width: 100%;
background: #fff;
text-align:center;
}
.nav li a{
width: 50%;
padding: 15px 0;
}
.nav li a:hover{
color: #f33 !important;
background: none;
}
.nav li.active a{
display:inline-block;
color: #f55;
text-decoration: underline;
}