Tabs Samples - InkJS

<div class="ink-tabs top">
    <ul class="tabs-nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#description">Description</a></li>
        <li><a href="#stuff">Stuff</a></li>
        <li><a href="#more_stuff">More stuff</a></li>
    </ul>
    <div id="home" class="tabs-content">
        <h4>Home</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="news" class="tabs-content">
        <h4>News</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="description" class="tabs-content">
        <h4>Description</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="stuff" class="tabs-content">
        <h4>Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="more_stuff" class="tabs-content">
        <h4>More Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
</div>
<script>
    new Ink.UI.Tabs('.ink-tabs');
</script>

<div class="ink-tabs bottom">
    <div id="home2" class="tabs-content">
        <h4>Home</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="news2" class="tabs-content">
        <h4>News</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="description2" class="tabs-content">
        <h4>Description</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="stuff2" class="tabs-content">
        <h4>Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="more_stuff2" class="tabs-content">
        <h4>More Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <ul class="tabs-nav">
        <li><a href="#home2">Home</a></li>
        <li><a href="#news2">News</a></li>
        <li><a href="#description2">Description</a></li>
        <li><a href="#stuff2">Stuff</a></li>
        <li><a href="#more_stuff2">More stuff</a></li>
    </ul>
</div>
<script>
    new Ink.UI.Tabs('.ink-tabs');
</script>

<div class="ink-tabs left">
    <ul class="tabs-nav">
        <li><a href="#home3">Home</a></li>
        <li><a href="#news3">News</a></li>
        <li><a href="#description3">Description</a></li>
        <li><a href="#stuff3">Stuff</a></li>
        <li><a href="#more_stuff3">More stuff</a></li>
    </ul>
    <div id="home3" class="tabs-content">
        <h4>Home</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="news3" class="tabs-content">
        <h4>News</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="description3" class="tabs-content">
        <h4>Description</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="stuff3" class="tabs-content">
        <h4>Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="more_stuff3" class="tabs-content">
        <h4>More Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
</div>
<script>
    new Ink.UI.Tabs('.ink-tabs');
</script>

<div class="ink-tabs right">
    <ul class="tabs-nav">
        <li><a href="#home4">Home</a></li>
        <li><a href="#news4">News</a></li>
        <li><a href="#description4">Description</a></li>
        <li><a href="#stuff4">Stuff</a></li>
        <li><a href="#more_stuff4">More stuff</a></li>
    </ul>
    <div id="home4" class="tabs-content">
        <h4>Home</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="news4" class="tabs-content">
        <h4>News</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="description4" class="tabs-content">
        <h4>Description</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="stuff4" class="tabs-content">
        <h4>Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
    <div id="more_stuff4" class="tabs-content">
        <h4>More Stuff</h4>
        <p>Arnold ipsum (...)</p>
    </div>
</div>
<script>
    new Ink.UI.Tabs('.ink-tabs');
</script>