JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul>
        <li>
            <a href="#t">Tab Name</a>
        </li> 
    </ul>
    <div id="t">tab content</div>
</div>

CSS

BODY
{
	font: 0.8em Verdana;
    background-color:hsl(0, 0%, 90%);
}

/**** COMMENT OUT THIS LINE TO SEE THE CONTENT SHIFT ****/
.ui-tabs-vertical { width: 55em; }
/********************************************************/

.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}



/*! jQuery UI - v1.11.4 - 2015-04-28
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, menu.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit...

JavaScript

$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");