JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="container-12">
    <ul>
        <li><a href="#headline">Headline 1</a>
        </li>
        <li><a href="#headline-two">Headline TWO</a>
        </li>
    </ul>
    <div id="headline">Headline 1 CONTENT</div>
    <div id="headline-two">Headline TWO CONTENT</div>
</div>

JavaScript

$( ".container-12" ).tabs({
    collapsible: true,
    active: false,
    beforeActivate: function (event, ui) {
        alert( "in" );
        if ($(ui.oldTab).length > 0) {
            $(ui.oldTab).height(54);
        }
        $(ui.newTab).height($(ui.newPanel).height());
    }
});