JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/sunny/jquery-ui.css">
<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a href="#tabs1-1">tabs link</a></li>
        <li><a href="#tabs1-2">tabs link</a></li>
    </ul>
    <div class="tabs-spacer"></div>
    <div id="tabs1-1">
        <p>Paragraph</p>
    </div>
    <div id="tabs1-2">
        <p>Paragraph</p>
    </div>
</div>
<div id="tabs2" class="tabs-bottom">
    <ul>
        <li><a href="#tabs2-3">tabs2 link</a></li>
        <li><a href="#tabs2-4">tabs2 link</a></li>
    </ul>
    <div class="tabs-spacer"></div>
    <div id="tabs2-3">
        <p>Tabs 2 Paragraph</p>
    </div>
    <div id="tabs2-4">
        <p>Tabs 2 Paragraph</p>
    </div>
</div>
<div id="tabs3" class="tabs-bottom">
    <ul>
        <li><a href="#tabs3-5">tabs3 link</a></li>
        <li><a href="#tabs3-6">tabs3 link</a></li>
    </ul>
    <div class="tabs-spacer"></div>
    <div id="tabs3-5">
        <p>Tabs 3 Paragraph</p>
    </div>
    <div id="tabs3-6">
        <p>Tabs 3 Paragraph</p>
    </div>
</div>

CSS

.tabs-spacer { float: left; height: 200px; }
.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }

JavaScript

$(function() {   
    $("#tabs,#tabs2,#tabs3").tabs();
   // fix the classes
   $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
   .removeClass( "ui-corner-all ui-corner-top" )
   .addClass( "ui-corner-bottom" );
   // move the nav to the bottom
    $( ".tabs-bottom .ui-tabs-nav" ).each(function() {
        $( this ).parents( ".tabs-bottom" ).append( this );
    });
});