JSFiddle - React, Tailwind, and code Playground
by karimkhan
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row-fluid" style = "margin-top:5%">
<div class = "navbar navbar-inverse">
<div class = "container">
<a href = "#" class = "navbar-brand">Blogger</a>
<!--Collapse menu with three lines-->
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--Actual menu-->
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">Blog</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-4">
<h2>Safari bug warning!</h2>
<p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui....
CSS
.footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 40px;
background-color: rgb(245, 245, 245);
}