JSFiddle - React, Tailwind, and code Playground

by Mansfield

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Here's some text above the tabs. This is just here<br />
as a placeholder of sorts. <br /><br />
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        this is a short tab
    </div>
    <div id="tabs-2">
        this is a long tab
    </div>
</div>

CSS

div#tabs-1
{
    height: 200px;
}

div#tabs-2
{
    height: 600px;
}

JavaScript

$(function () {
    $("#tabs").tabs();
});