JSFiddle - React, Tailwind, and code Playground

by bg100

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css">
<div style="margin: 10px;">
    <div class="ui-tabs-vertical">
        <ul>
            <li><a href="#tab1">One</a>

            </li>
            <li><a href="#tab2">Two</a>

            </li>
            <li><a href="#tab3">Three</a>

            </li>
        </ul>
        <div id="tab1">Tab One Content</div>
        <div id="tab2">Tab Two Content</div>
        <div id="tab3">Tab Three Content</div>
    </div>
</div>

CSS

.ui-tabs-vertical { padding: 0; border-width: 0; }
.ui-tabs-vertical > .ui-tabs-nav { padding: 0; background: transparent; border-width: 0; float: left; width: 15%; }
.ui-tabs-vertical > .ui-tabs-nav li { clear: left; width: 100%; border-bottom: 1px solid !important; border-right-width: 0 !important; margin-right: -1px !important; margin-bottom: 0.3em !important; border-top-right-radius: 0; border-bottom-left-radius: 4px; }
.ui-tabs-vertical > .ui-tabs-nav li:first-of-type { margin-top: 1em !important; }
.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: 1px; border-right-width: 1px; margin-right: 0 !important; }
.ui-tabs-vertical > .ui-tabs-panel { margin-left: 1px; padding: 1em; float: left; width: 80%; border-width: 1px; min-height: 20em; border-top-left-radius: 8px; border-top-right-radius: 0px; border-bottom-left-radius: 8px; border-bottom-right-radius: 0px; }

JavaScript

$(".ui-tabs-vertical").tabs();