JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/tjvantoll/jquery-ui-vertical-tabs/master/vertical-tabs.css">
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://rawgit.com/tjvantoll/jquery-ui-vertical-tabs/master/vertical-tabs.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
    </ul>
    <div id="tabs-1">
        One Contents
    </div>
    <div id="tabs-2">
        Two Contents
    </div>
    <div id="tabs-3">
        Three Contents
    </div>
</div>

<div id="toggle">
	<label for="horizontal">Horizontal</label>
	<input type="radio" name="orientation" id="horizontal">
	<label for="vertical">Vertical</label>
	<input type="radio" name="orientation" id="vertical" checked>
</div>

CSS

.ui-buttonset { margin-top: 3em; }

JavaScript

$( "#tabs" ).tabs({ orientation: "vertical" });

// For toggling between the two orientations only
$( "#toggle" )
    .buttonset()
    .on( "change", "input", function() {
        $( "#tabs" ).tabs( "option", "orientation", this.id );
    });