JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="htabs-outer">
    	<h1>htabs-outer</h2>
	<!--begin htab outer menu-->
	<ul>
		<li><a href="#htab-outer-1">Horizontal Tab 1</a></li>
		<li><a href="#htab-outer-2">Horizontal Tab 2</a></li>
		<li><a href="#htab-outer-3">Horizontal Tab 3</a></li>
	</ul>
	<!--end htab outer menu-->
	<!--begin htab outer panels-->
	<div id = "htab-outer-1">
		<h2>Htab outer 1 content</h2>
        <div class="vtabs">
            <h1>Vtabs</h1>

    <!--begin vtab menu-->
    <ul>
        <li><a href="#vtab-11">Vertical Tab 1</a>
        </li>
        <li><a href="#vtab-12">Vertical Tab 2</a>
        </li>
        <li><a href="#vtab-13">Vertical Tab 3</a>
        </li>
    </ul>
    <!--end vtab menu-->
    <!--begin vtab panels-->
    <div id="vtab-11">
        	<h2>Vtab 1 content</h2>
    </div>
    <div id="vtab-12">
         <h2>Vtab 2 content</h2>

    </div>
    <div id="vtab-13">
         <h2>Vtab 3 content</h2>

    </div>
    <!--end vtab panels-->
</div>
	</div>

	<div id = "htab-outer-2">
		<h2>Htab outer 2 content</h2>

		<div class="vtabs">
            <h1>Vtabs</h1>

    <!--begin vtab menu-->
    <ul>
        <li><a href="#vtab-21">Vertical Tab 1</a>
        </li>
        <li><a href="#vtab-22">Vertical Tab 2</a>
        </li>
        <li><a href="#vtab-23">Vertical Tab 3</a>
        </li>
    </ul>
    <!--end vtab menu-->
    <!--begin vtab panels-->
    <div id="vtab-21">
        	<h2>Vtab 1 content</h2>
    </div>
    <div id="vtab-22">
         <h2>Vtab 2 content</h2>

    </div>
    <div id="vtab-23">
         <h2>Vtab 3 content</h2>

    </div>
    <!--end vtab panels-->
</div>
</div>
<div id="htab-outer-3">
    	<h2>Htab outer 3 content</h2>
        <div class="vtabs">
            <h1>Vtabs</h1>

    <!--begin vtab menu-->
   ...

CSS

.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;
    border-right-width: 1px;
}
.ui-tabs-vertical > .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 40em;
}

JavaScript

$(function () {
    $("#htabs-outer").tabs();

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

    $("#htabs-inner").tabs();

});