JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://heo-iforms.awardspace.us/iformlibrary/css/jquery-ui-1.8.17.custom.css">
<div id="leftTab">
    <ul>
        <li><a href="#leftTab-1">Left Tab 1</a></li>
        <li><a href="#leftTab-2">Left Tab 2</a></li>
        <li><a href="#leftTab-3">Left Tab 3</a></li>
    </ul>
    <div id="leftTab-1">
        <h1>This is Left Tab 1</h1>
        <div id="subTab">
            <ul>
                <li><a href="#subTab-1">Sub Tab 1</a></li>
                <li><a href="#subTab-2">Sub Tab 2</a></li>
                <li><a href="#subTab-3">Sub Tab 3</a></li>
            </ul>
            <div id="subTab-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar 
                feugiat metus, eu dapibus tortor faucibus eu. Donec iaculis velit velit, 
                quis fermentum libero. Aliquam pretium arcu eget enim tincidunt id porta 
                nisi pretium. Curabitur arcu lectus, semper sit amet egestas et, 
                interdum et augue. Cum sociis natoque penatibus et magnis dis parturient 
                montes, nascetur ridiculus mus. Duis ut odio eu turpis molestie molestie 
                adipiscing sed massa. Proin semper dui at odio commodo et congue lacus 
                congue. Ut vel lacus erat.</p>
            </div>
            <div id="subTab-2">
                <p>Suspendisse hendrerit massa nec nisi ullamcorper in aliquam arcu 
                blandit. Aliquam erat volutpat. Sed nec bibendum tortor. Quisque pretium 
                ante nec nisl congue ut ultrices ante pretium. Cras magna diam, aliquet 
                a placerat eget, semper nec nibh. Pellentesque ut erat eget felis 
                laoreet accumsan eu et metus. Pellentesque habitant morbi tristique 
                senectus et netus et malesuada fames ac turpis egestas. Sed elementum 
                laoreet augue, hendrerit vulputate massa iaculis a. Vestibulum velit 
                orci, fermentum in...

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-selected { 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;}

p { font-size: 10pt; }
h1 { font-weight: bold; }

JavaScript

$(document).ready(function() {
    $("#leftTab").tabs().addClass('ui-tabs-vertical > ui-helper-clearfix');
    $("#leftTab > ul > li").removeClass('ui-corner-top').addClass('ui-corner-left');
    
    $('#subTab').tabs();
});