JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="aboutprod-tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">3rd</a></li>
    <li class="last"><a href="/products">Learn more...</a></li>
  </ul>
  <div id="tabs-1">
    Tab panel 1
  </div>
  <div id="tabs-2">
    Tab panel 2  
  </div>
  <div id="tabs-3">
    Tab panel 3
  </div>
</div>

JavaScript

$("#aboutprod-tabs").tabs({ 
    fx: [{opacity:'toggle', duration:'normal'}, {opacity:'toggle', duration:'fast'}] 
}).addClass('ui-tabs-vertical');

$("li.last a").unbind('click').each(function() {
  this.href = $.data(this, 'href.tabs');
});