JSFiddle - React, Tailwind, and code Playground

by janjarfalk

HTML

<script src="http://jquery-tabify.googlecode.com/files/jquery.tabify-1.4.source.js"></script>
<ul class="menu">
    <li class="active"><a href="#contentHome">Home</a></li>
    <li><a href="#contentGuestbook">Guestbook</a></li>
    <li><a href="#contentLinks">Links</a></li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>


<ul class="menu">
    <li class="active"><a href="#contentHome2">Home</a></li>
    <li><a href="#contentGuestbook2">Guestbook</a></li>
    <li><a href="#contentLinks2">Links</a></li>
</ul>
<div class="content" id="contentHome2">Content for Home</div>
<div class="content" id="contentGuestbook2">My guestbook</div>
<div class="content" id="contentLinks2">Links</div>

CSS

body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a { background: #eef; }
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }

JavaScript

$('.menu').tabify();